IE vs FF positioning issues

[millercj]

I'm building a page at www.stjohns.digiconmediagroup.com and i'm having issues with the positioning between FF and IE. My document is valid XHTML 1.0 strict and my problem is, what is currently the big green div. below is my CSS for that element. I just can't seem to see my problem.

 

#phraseholder{
width:425px;
height:172px;
background-color:#00FF33;
position:relative;
left:250px;
top:-111px;
}

[haku]

You aren't doing anything wrong. IE is just screwed up. The way you have positioned the div using pixels relative to the top and left is most likely counting against one element in FF and another in IE.

 

You can fix this using conditional comments. Good luck!

[millercj]

Ok, but here's another one...aside of the the green div there's a blue colored object that has quotes in it...if it's positioned using relative ti gets and extra "margin" i'll call it, added to the top of the div and it blocks my navigation (but only in FF). If i change the positioning property to absolute, it goes away but IE and FF throw bigger issues with absolute than relative...any ideas?

[haku]

Don't use absolute positioning. Its just not a good idea.

 

Read the article I posted earlier. You can fix all your problems in IE without affecting FF at all using conditional comments.

[bronzemonkey]

I don't see any problems in IE7.

 

The layout difference in FF (and other modern browsers) is because you've got floated content within your #maincontent div that isn't self-clearing. Basically the floats break from the document flow and just poke out the bottom of maincontent...which is itself only a pixel height because it contains no non-floated content. Add this to your stylesheet and it will be fixed:

 

#maincontent:after {clear:both; content:"."; display:block; height:0; line-height:0; font-size:0; visibility:hidden;}

 

If you encounter this in IE it is because the IE property "hasLayout" hasn't been triggered. "hasLayout" is triggered by position values other than static, height and width values other than auto, and a few other properties. Google it for more info. Anyway you can trigger hasLayout in IE7 to self-clear an element with:

 

#myelement {min-height:1px;}

 

And in IE6/5 with:

 

#myelement {height:1px;}

 

But put those in stylesheets wrapped in conditional comments