h1's getting nipped off and stuff

strange little quirks

[Rischen]

Hi,

I've hit a bit of a snag.

I've got this weird thing happening in a three column layout where the top of my headers in my right and left columns are being nipped off. Also, even though I've given them all the same top-margin, the right and left div elements are floating lower down. Also, I'm getting a strange indent in my central column although none is set.

Please put the following in ye olde notepad and see what you can see.

I appreciate your time,

Rischen

<style type="text/css">

.marquee {
position: absolute; left: 0;
}

body {
background-color: white;
margin-right: 0;
}

#navigator {
padding: 0;
margin-top: 6em;
float: left;
width: 8em;
}

#links {
padding: 0 1em 0 1em;
margin-top: 6em;
float: right;
width: 8em;
border-style: solid;
border-color: #cccccc;
border-width: 0 0px 0 0;
}

#content {
margin: 6em 8em;
padding-left: 1em;
border-width: 0 1px 0 1px;
border-style: solid;
border-color: #cccccc;
}

#footer {
clear: both;
}

h1 {
font-family: arial;
font-size: 1.3em;
color: #3399CC;
line-height: 0.5em;
}

p {
font-family: arial;
font-size: 0.7em;
}

</style>

<img class="marquee" src="..\images\marquee.gif" alt="An image" />

<div id="navigator">

<h1>Navigation</h1>
<p>Navigate our site</p>
</div>

<div id="links">

<h1>Links</h1>
<p>Our friends. asdfasdf asdf asdf dsf dsf sdf sdaf sdf sdf asdf adsf asdfsdf dsfsdafasdf df dsf dfdfad fd </p>
</div>

<div id="content">

<h1>Information</h1>
<p>This is information. This is information. This is information. This is information.</p>
</div>

[SuzyUK]

h1 {
font-family: arial;
font-size: 1.3em;
color: #3399CC;
/* line-height: 0.5em; */
}

The line-height is not big enough to contain the font-size so the overflow is getting cropped.

You can use an explicit value (em's px etc..) for

line-height;

especially when trying to contain something in a box which has an explicit height set.. but more ususally it just expressed as a number e.g. 1.5 which equates to the font-size x 1.5 (or 150%) and you can use percentages too

so:

line-height: 1.5;

is the same as

line-height: 150%; 

both will give the object a line height of 150% of the font-size

Suzy

[Rischen]

Hi Suzy,

Sorry I took so long.

I appreciate your time and your help.

Rischen