Help with CSS compatibility in IE

Core

I am curreently trying to throw together a website for my company and am running into a wierd issue. In Firefox the website looks fine, but when viewed with IE there is a white gap between the logo and the menu bar and a large white gap on the right side of the page. Also too much white space at the lower menu. If someone could take a quick look I threw it up on a temporary page. Hopefully someone can figure this out. Keep in mind this is a pretty rough version right now. Anyway here is the link:

http://http://www.quickcolorinc.com/index-temp.html
And the Style Sheet in case anyone wants to see that.
http://www.quickcolorinc.com/style.css

Infidel

Which version of IE? It's not even consistent with itself sometimes. In IE6 at least I'm seeing it.

It's because you didn't put the closing </div> at the end of the line. The banner div therefore contains not just an image but an image and text, even if it's just whitespace. The default vertical alignment of an image is to put the bottom on the text baseline, so you are seeing the font descent and line gap in that white space.

Move your </div> to the end of the line, or end the line with <br /> tags.

MagicPrime

You can make lines in your CSS code that only IE will read.

If you type this out

color: #FFFFFF;
!color: #000000;

Then in FireFox the text will be white, and in IE the text will be black. CSS flows downwards, any entry with a ! infront that is below another entry will over-write it because IE will read and apply the lines with the !.

Sharp101

Infidel wrote: »

Which version of IE? It's not even consistent with itself sometimes. In IE6 at least I'm seeing it.

It's because you didn't put the closing </div> at the end of the line. The banner div therefore contains not just an image but an image and text, even if it's just whitespace. The default vertical alignment of an image is to put the bottom on the text baseline, so you are seeing the font descent and line gap in that white space.

Move your </div> to the end of the line, or end the line with <br /> tags.

This is most likely it. IE is very testy with whitespace.

change:
[HTML]<div id="banner"><a href="index.html"><img src="images/banner_logo.jpg" alt="" name="Quick Color Inc" border="0"></a>
</div>[/HTML]

to:
[HTML]<div id="banner"><a href="index.html"><img src="images/banner_logo.jpg" alt="" name="Quick Color Inc" border="0"></a></div>[/HTML]

flatlinegraphics

first, get this:
http://www.microsoft.com/DownLoads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

second, this is a better way for ie compatibiliy:

<!--[if lt IE 7]>
<link href="defaultIE6.css" rel="stylesheet" type="text/css">
<![endif]-->

all browsers other than anything earlier than ie v7 will ignore it as a comment. this will keep your main sheet from getting kludged up with css hacks.
will keep everything valid as well.

third, use ie7.js
http://code.google.com/p/ie7-js/
will kick ie6 into something at least somewhat standards complient. used with the ie conditional comments above, will let you smack down ie stuff pretty quick.

probably a whitespace error. or one of the frustrating height issues. make sure every block element has a height, and that its overflow is set properly.

lastly, recompress those big images! never resize stuff in html! especially up!