why god why!- css differences

Im at a loss as to why this is happening but here goes.

Why does the light blue section with the header in it look perfect in IE and shit in IE6. IE6 seems to add a huge gap at the bottom.

the page is here... www.organiclinker.com/advertise.cfm

any suggestions of what to do?

thanks

Mike

 

Look at #headingarea. You want the h1 and the #headerbanner to reside side by side. The header banner properly drops to the next line down. Here's where you went wrong. You made #headerbanner position relative, and shifted it up 50px. There're two things wrong with that; 1) it's not a good way to get what you want, and 2) the elements shifted position is not in the flow, only the natural spot remains in the flow. And, that's where IE messes with you. The natural position extends beyond the container's (#headingarea) size; it overflows. IE wrongly expands the container to enclose the vacated spot, thus the extra. Why didn't Firefox add the extra? Because it just let the spot overflow.

Do it like so, instead;

#headingarea h1 {
    float: left;
    width:390px;
    display: inline; /*IE fix*/
    margin-left :50px;
    color:#4EB9FF;
    }

#headerbanner {
    width:120px;
    margin-left:590px;
    }

Code (markup):

Instead of shifting an RP element, you could have given it a negative top margin, like so;

#headerbanner{
    width:120px;
    margin-left:590px;
    margin-top: -55px;
}

Code (markup):

My first suggestion is a better solution than forcing things to be where they don't want to be.

cheers,

gary

 

thanks so much Gary, that worked a real treat!!

I appreciate the help!

Mik3