Distance between elements - IE6

[laertjansen]

Hello everyone,

I´m working on a new folio http://www.laertjansen.com/test/ (http://www.laertjansen.com/test/aboutme.html) and have been fighting with css.

With FF its working fine but with IE6 there´s a gap at the bottom and I can´t figure out how to sort it out. The distance between the last line "laert jansen" and the footer is higher in IE6.
And the distance between the first line "My name is Laert Jansen" and the line hr is higher too.

Here´s the css for this part:

#left { margin: 20px 60px 80px 30px; height:520px; background:none; width: 630px; }
#aboutme{ width: 120px; font-style: italic; color:#0099ff; margin:15px 0 15px 30px; font-size:130%; background:none; border-bottom:none; }
h4 { color: #000;; font-size: 88%; background-color: #fff; padding: 5px 5px 5px 5px; width: 397px; margin-bottom: 25px; margin-top: 20px; }
.txt p { color: #ccc; font-size: 71%; line-height: 23px; margin: 15px 0 0 0; background-color: #fff;}
.txt p span { background:#1C1C1C; border-bottom:1px solid #0099ff; }

May I ask for some help here? I´m not an expert in builiding and I´ve tried here but is not working.

Thanks a lot,

Laert

[fasterthanlight™]

#left has a defined height of 520px, and the content is larger than 520px

IE has issues with stuff being taller than you say it is, so remove that declaration and minimize the bottom margin:

#left {
background:transparent none repeat scroll 0 0;
height:520px; (delete)
margin:20px 60px 20px 30px; (adjust)
width:555px;
}

Now, in terms of the heading (My name is ....)

try adding padding: 0; to the h4{}

h4 {
background-color:#FFFFFF;
color:#000000;
font-size:88%;
margin-bottom:25px;
width:397px;
padding:0;
}


give that a shot

[laertjansen]

Hey man, you rock! thanks a lot.
The gap in Ie is still a little bit higher but it´s better than ever now...
May I ask you what background:transparent none repeat scroll 0 0; means?
thanks a lot man.



#left has a defined height of 520px, and the content is larger than 520px

IE has issues with stuff being taller than you say it is, so remove that declaration and minimize the bottom margin:

#left {
background:transparent none repeat scroll 0 0;
height:520px; (delete)
margin:20px 60px 20px 30px; (adjust)
width:555px;
}

Now, in terms of the heading (My name is ....)

try adding padding: 0; to the h4{}

h4 {
background-color:#FFFFFF;
color:#000000;
font-size:88%;
margin-bottom:25px;
width:397px;
padding:0;
}


give that a shot

[fasterthanlight™]

OH yea sorry about that,

the background stuff is what Firebug (http://getfirebug.com/) gives you when you copy and paste from its source thang, don't worry about it, leave your background as it is.

Its also the shorthand way of writing:

background-position: scroll; (which is what browsers default it as)
background-color: transparent;
background-repeat: repeat; (default)
background-position: 0 0;

instead of writing four lines of code you can write it in one:
background:transparent none repeat scroll 0 0;

You could also fiddle with line-height: to molest IE into being more precise