View Full Version : Site looks different in IE to Firefox

12-18-2010, 03:29 PM
Hi Guys & Gals

It seems I always have this issue in the sites I create, it's not the first time I've come to the forum with this problem - but each time it seems to be a different cause lol!

My site looks perfect in Firefox, but in IE it's left alligned and the <li> buttons seem to have too much padding on them or something?

Can anyone help?


12-18-2010, 03:44 PM
You need to remove that comment before your doctype, and also the xhtml attributes in your html tag - so this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE will not behave itself without a correct doctype - so that's the first thing to fix. If this doesn't resolve all the issues, post back.

12-18-2010, 03:47 PM
Add height:1%; to #Primary-Widget-Area li to fix the haslayout issues (http://www.satzansatz.de/cssd/onhavinglayout.html).

12-18-2010, 04:12 PM
One last question...

There should be a 50px top margin before the h4 tag in the Secondary-Widget-Area, but it's missing...

#Secondary-Widget-Area h4 { margin-top: 50px; font-size: 10pt; margin-bottom: 5px; }
#Secondary-Widget-Area { width: 250px; margin-bottom: 5px; }

Where could it be? :o)

12-18-2010, 04:17 PM
Add overflow:auto; to #Secondary-Widget-Area to clear the floats by the above elements.

12-18-2010, 04:19 PM
It's there, but since #Primary-Widget-Area ul is floated, #Primary-Widget-Area does not extend to include all of its contents, so the margin has no effect. To fix, clear your floats via:

#Primary-Widget-Area {
margin-bottom: 5px;
overflow: auto;
width: 250px;