Arrrgh...cant stand IE6...

[Siebird]

My site is dispaying properly in IE7, FF, and Safari(except search bar). I have 3 issues in IE6 that cause the page to blow up. The Horizontal Navigation at the top looks like it has extra margin/padding to it? Take a look, markup is below:

<div id="globalheader">
			<ul id="globalnav">
				<li id="nav_about"><a href="#" title="Who is Fabral?">About</a></li>
				<li id="nav_residential"><a href="#" title="Residential Products">Residential</a></li>
				<li id="nav_postframe"><a href="#" title="Post Frame Products">Post Frame</a></li>
				<li id="nav_archcomm"><a href="#" title="Architectural &amp; Commercial Products">Architectural &amp; Commercial</a></li>
				<li id="nav_colorvis"><a href="#" title="Stylize Your Building of Choice">Color Visualizer</a></li>
				<li id="nav_tech"><a href="#" title="Need Technical Specifications?">Technical</a></li>
				<li id="nav_news"><a href="#" title="Latest Headlines From Fabral">News</a></li>
				<li id="nav_corpinfo"><a href="#" title="Information On The Company">Corporate Information</a></li>
			</ul>
....</div>

CSS

#globalheader {
	position: relative;
	margin: 0;
	padding: 0;
	width: 846px;
	height: 31px;
	background: url(../layout/bg-globalheader.jpg) no-repeat bottom;
}
 
#globalnav {
	position: relative;
	height: 25px;
	width: 598px;
	padding: 0;
	margin: 0;
	float: left;
	background: url(../layout/bg-globalnav.gif) repeat-x;
}
 
#globalnav ul, #globalnav li {
	margin: 0;
	padding: 0;
	height: 48px;
	float: left;
	width: auto;
	list-style-type: none;
	display: inline;
	text-indent: -9000px;
}
 
#globalnav li a {
	margin: 0;
	padding: 0;
	display: block;
	width: auto;
	height: 25px;
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
}

Next issue, the Billboard seems to have the same problem:

<div id="billboard">
			<h2 id="ad_postframe"><a href="#" title="Post Frame">Post Frame</a></h2>
			<h2 id="ad_residential"><a href="#" title="Residential">Residential</a></h2>
			<h2 id="ad_archcomm"><a href="#" title="Architectural/Commercial">Architectural/Commercial</a></h2>
		<div class="clear">&nbsp;</div>
		</div>

CSS:

#billboard {
	position: relative;
	margin: 2px;
	width: 838px;
	height: 323px;
	background: #FFF;
	border: 2px solid #333;
}
 
#billboard h2 {text-indent: -9000px}
 
#ad_postframe {
	position: relative;
	display: block;
	margin: 2px 0 2px 2px;
	float: left;
	width: 277px;
	height: 319px;
	background: url(../layout/billboard-postframe.jpg) no-repeat;
}
 
#ad_residential {
	position: relative;
	margin: 2px 2px 2px 2px;
	float: left;
	width: 277px;
	height: 319px;
	background: url(../layout/billboard-residential.jpg) no-repeat;
}
 
#ad_archcomm {
	position: relative;
	margin: 2px 2px 2px 0;
	float: right;
	width: 276px;
	height: 319px;
	background: url(../layout/billboard-archcomm.jpg) no-repeat;
}
 
#billboard a { 
	margin: 0;
	padding: 0;
	display: block;
	width: 276px;
	height: 319px;
	background-position: 10px top;
	background-repeat: no-repeat;
}

And finally, a when I added a margin to <ul> <li> in #quicknews, it pushed the H3 headings over a tad???

<div id="quicklinks">
				<div id="quicknews">
					<h3 title="News">News</h3>
					<ul>
					<li>...
						<ul>
							<li>....<ul class="readmore"><li>...</a></li></ul></li></ul></li>
					</ul>
				</div>
				<div id="quicksearch">
					<h3 title="Dealer Search">Dealer Search</h3>
				</div>
				<div id="quickstar">	
					<h3 title="Energry Star">Energy Star</h3>
				</div>
				<div id="quicktax">	
					<h3 title="Tax Savings">Tax Savings</h3>
				</div>
				<div class="clear">&nbsp;</div>
		</div>

CSS:

#quicklinks {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	background: url(../layout/bg-quicklinks.gif) repeat-y
}
 
#quicklinks h3 {margin: 0;height: 30px;text-indent: -9000px;}
#quicklinks ul li {
	margin: 0 5px 0 12px;
	padding: 0;
	font-size: .8em;
	color: #000;
	list-style-type: none;
}
 
#quicklinks ul li a { color: #00336F}
#quicklinks ul li a:hover { color: #FFF; text-decoration: none; background: #00336F}
 
#quicklinks ul li ul li {
	margin: 0 0 0 15px;
	padding: 0;
	font-size: .8em;
	color: #000;
	list-style-type: square;
}
 
#quicklinks ul li ul li ul li {margin: 0 0 0 -20px; width: 69px; height: 16px; list-style-type: none}

[Trent Reimer]

Internet Explorer is a wonderful browser for displaying pages authored in 1998.

What happens if you remove all surrounding whitespace characters in the nested block elements? e.g.

<div id="globalheader"><ul id="globalnav">

[Trent Reimer]

I see the "clear" divs are taking up space.

If you remove those empty divs and clear the elements directly you may get better results.

#globalheader {
    clear: both;
}
 
#billboard {
    clear: both;
}
 
#quicklinks {
    clear: both;
}

[Siebird]

Internet Explorer is a wonderful browser for displaying pages authored in 1998.

Wish it wasn't as popular as it is.

Anyways...I removed the white space, and added no margin/padding to the "clear" divs. No success

.clear {clear: both; height: 0px; margin: 0; padding: 0}

[Trent Reimer]

Sorry about the whitespace then, false lead.

[Trent Reimer]

Anyways...I removed the white space, and added no margin/padding to the "clear" divs. No success

.clear {clear: both; height: 0px; margin: 0; padding: 0}

Actually you should be able to get rid of the "clear" divs altogether since IE6 seems to display them its own way rather than letting you specify a zero height, etc. I have gone back and edited my post so it includes a small example now where the "clear" attribute is added to the block elements directly.

[Siebird]

Actually you should be able to get rid of the "clear" divs altogether since IE6 seems to display them its own way rather than letting you specify a zero height, etc. I have gone back and edited my post so it includes a small example now where the "clear" attribute is added to the block elements directly.

I gave that a shot, and that didn't seem to work either, I had to keep the empty clear dive in my quicklinks as it caused the footer to sit right under the #billboard. Thanks for trying though. Anyone else have any ideas why IE6 is creating these margins?

[james_littler]

zero all margins and padding should be the first thing in your css...

*{padding:0px; margin:0px}

that needs to be before everything else and will set the browsers margins and padding to 0 all browsers have different defalts

that should give you a solid and reliable foundation on which to build

[Siebird]

zero all margins and padding should be the first thing in your css...

*{padding:0px; margin:0px}

I have done something similar to this, I have an initial.css file that neutralizes key elements:

/* =INITIAL 
   v2.1, by Faruk Ates - [url]www.kurafire.net[/url]
   Addendum by Robert Nyman - [url]www.robertnyman.com[/url] 
   Addition by Christian Montoya - [url]www.christianmontoya.net[/url] */
 
/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% "Times New Roman", Georgia, Verdana, Arial, Helvetica, sans-serif;
}
 
/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}
 
/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}
 
/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
p, li, blockquote, input, select, textarea, th, td {
        font-size: 1em;
}

[Centauri]

Regarding the billboard h2's - anything that is floated and has a margin should have set an inline display, otherwise IE6 will double the margin is the margin is against a solid object. The ad_postframe h2 is too far right in IE6, therefore the total width does not fit. Give the billboard h2's inline display.

IE6 has stupid margin problems at times, and it is quite often better to apply padding instead of margins. Remove the quicklinks ul margin and play around with padding instead.

Some of the navigation space is due to the globalnav ul and li having a height of 48px instead of 25px - IE will expand the conatiner to suit. Not sure about the space above the navbar - my IE Web Accessibility Toolbar doesn't like your linking the other stylesheets from the main one, so I can't really see what styles IE is actually applying to elements.

[Siebird]

Thanks Centauri! Putting the h2 to display: inline fixed the margin/padding issues in the #billboard div, I never knew that!. The horizontal nav I switched the height of 48px to 25px on the #globalnav, but I still have margin/padding issues above, not quite sure why thats adding space in IE6. Is it better to import CSS files from a master, or have them imported in <head> tag?

As far as the #quicklinks, I removed the margin, and added padding, and played around with it, but the padding also pushes the h3 over. If I remove the margin/padding, IE6 displays correctly, but the unordered list lay on the border, not in the faux bg. Any other ideas/suggestions that could fix this?

Again, Thanks for all the help

[Centauri]

Padding on the ul or li elements themselves of no use?

If the style sheets are linked one after the other from the html page instead of from the master css file, then my toobar would be able to show what styles are being applied, and may make tracking a little easier.

[Siebird]

Padding on the ul or li elements themselves of no use?

If the style sheets are linked one after the other from the html page instead of from the master css file, then my toobar would be able to show what styles are being applied, and may make tracking a little easier.

I moved all the style sheets to the <head> for you or anyone that wants to debug.

As far as the padding on the ul or li's, I only played around with the #quicklinks ul li, I didnt mess with the nested lists as when I added margin/padding to this, it caused the layout to break:

#quicklinks ul li {
	margin: 0;
	padding: 0 5px 0 12px; ul
	font-size: .8em;
	color: #000;
	list-style-type: none;
}
#quicklinks ul li a { color: #00336F}
#quicklinks ul li a:hover { color: #FFF; text-decoration: none; background: #00336F}
 
#quicklinks ul li ul li {
	margin: 0 0 0 15px;
	padding: 0;
	font-size: .8em;
	color: #000;
	list-style-type: none;
}
 
#quicklinks ul li ul li ul li {margin: 0 0 0 -20px; width: 69px; height: 16px; list-style-type: none}

[Siebird]

I got it working in IE6 finally. I did what you said Centauri and messed with the <ul> and <li> margin/padding, and broke it down into two seperate styles, at first I had #quicklinks ul, #quicklinks li {} together whiched seemed to be adding double. I then removed them from each other and applied margin/padding to their respective values.

I downloaded the IE web dev toolbar and did some debugging myself. IE6 is showing the empty clear div, with a hasLayout = -1, not sure what that means?

<div id="header">
		<h1 id="logo">Fabral &ndash; Metal Wall and Roof Systems</h1>
			<ul id="header_nav">
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="Contact">Contact</a></li>
				<li><a href="#" title="Frequently Asked Questions">F.A.Q</a></li>
			</ul>
		<div class="clear"></div>
		</div>

CSS:

.clear {clear: both; height: 0px; margin: 0; padding: 0}

[richtestani]

One thing I've learned is IE6 loves lists displayed as inline when you apply any sort of padding,line-height to it. IE also works works well when you float your lists, you just need to clear more often in your layouts.

[Centauri]

Ahh - I had missed that clearing div - IE6 will not allow a div to collapse to less height than the current text size. For small divs, setting text height to 1px works, but if you want no height, then overflow:hidden applied to the .clear class style will fix that.

[Siebird]

overflow:hidden applied to the .clear class style will fix that.

Money!