What does this look so bad in IE?

Hey, the template i'm coding for Imgflow is being a real *****, It looks perfect in Firefox and Opera, but like horriable in Internet Explorer.

Look At it in Firefox and then in IE:

www.nuiro.com/imgflow/

and heres the CSS Frame work

www.nuiro.com/imgflow/assets/css/global.css


Another know what's wrong and / or how to fix it.

Thanks

Best Regards,
Jamie

you could lose expandability and use sbsolute positioning.

thats probrally not a good idea. looks like a padding issue but you never know in IE :S

freenode channel #css, those guys are gurus, they usually know all about IE's rendering quirks.

I wouldn't use transitional doctype as IE has a lot of quirks in this mode (which is why its called quirks mode). Try a strict html 4.0 or xhtml 1.0 doctype instead.

THe other main problem you're having is you're not taking into account the different way IE determinds margin and padding from firefox and other compliant browsers.

IE thinks that padding width should be determined by TOTAL WIDTH = DIV WIDTH + LEFT PADDING + RIGHT PADDING

While FF and other compatibles think it should be TOTAL WIDTH = (DIV WIDTH - LEFT PADDING - RIGHT PADDING) + LEFT PADDING + RIGHT PADDING

In other words if you have a 500px wide div and a padding of 10px, firefox makes sure the width of the div plus the padding is 500px while IE takes the padding and adds it to 500 giving you a total width of 510px;

Most of the time, I nest make a div with no margin and padding and only a width for design elements. Then I will make nested div's to contain different content. This helps deal with this problem.

I also notice you're using spacer divs in your code in the menu links. The propper way would be to use a UL/LI list and style the LI's to include whatever images/space you want. CSS was invented with eliminating spacer elements in mind.

I would also make sure your menu ID's are explicitedly receiving a margin and padding, even if it's 0. I would do this at least for a test. Because IE (and firefox) refuse to let some elements inherit a padding or margin of 0 (UL/LI being one of these). SO you have to be careful that you don't have something nested inside another element that does not inherit. The cascading element of CSS is absolutely wonderful, however it does take some tweaking and getting used to.

I have not fully examined your code so I don't know what the problem is exactly I just wanted to give you some common errors that cause these types of problems. My bet is that your padding/margins on the menu elements are out of whack. Change them up and see how it affects your document for some testing.

looks fine in IE7

You've used divs around your menu buttons and you let them float to the left.
As jjmac said, you should use a list for it.