Internet Explorer and css Layout, o dear!?

Question

Basically, i suspect that Internet explorer is being an a*se as usual and rendering my site wrong.

I have problems with some other sites due to some of IEs bugs, The last was down to the double margin bug.

This one however looks more of a problem with widths, I'm not really that sure.

You can see my site here http://www.liquidebooks.com

the main css file is here http://www.liquidebooks.com/defult.css

As you can see if you look at the page, the main content has been pushed down under the navigation. and the catorgories menu is higher than it should be.

It all looks fine on firefox,

So if anyone has any ideas of how to fix this problem I would be extremly greatfull. -- I'm pretty sure i don't have any overlaping divs

Answer 1

Internet Explorer & CSS issues
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

Answer 2

First part is yep, IE fingers the width as the part *inside* the margins and Firefox fingers the width *outside* the margins...be careful...
Second part, is some IE releases don't handle selectors like *>something too well
I see you seem to have some divs as widths...you might try setting up divs as *percentages* ("liquid" or "fluid") widths to adjust to the screen area...and floating left/right as appropriate. E.g., you could set a div left for the nav then a big div right for the main content...and split the big div right into two smaller divs, one main smaller floating left and the other sidebar floating right.

See examples in the cited text.

Answer 3

One thing I noticed were underscore characters used in some of your class names.

Classes may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.

At quick glance I also did not see any positioning declared for the center section, which seems to be causing the most problems. Have you tried float: left with that?

There are several CSS validation tools online that might help you, like this one:

http://htmlhelp.com/tools/csscheck/

Answer 4

As you say, there is a problem with IE. But wait a minute! IE is the most used browser on earth (I use Firefox) so you have to live with all its bugs, and write code that works when people view the site. Just think about what you may be doing wrong, not what IE is doing wrong. It isn't a perfect world, so have a coffee, stop blaming everyone else, start from scratch and stop pushing the limit. You site is very nice, but I bet you could remove half the fancy code and it would still be nice.