nickburrett
12-18-2010, 02: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?
http://www.coolkidsparty.com/
You need to remove that comment before your doctype, and also the xhtml attributes in your html tag - so this:
<!--GET HEADER START -->
<!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">
becomes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
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.
abduraooft
12-18-2010, 02:47 PM
Add height:1%; to #Primary-Widget-Area li to fix the haslayout issues (http://www.satzansatz.de/cssd/onhavinglayout.html).
nickburrett
12-18-2010, 03: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)
abduraooft
12-18-2010, 03:17 PM
Add overflow:auto; to #Secondary-Widget-Area to clear the floats by the above elements.
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;
}
