navigation too low in IE6

**rooster** · Sep 22, 2007 22:36

Hello everyone,

I have recently updated the design on one of my websites. I did use a template
that I downloaded from Open Source Web Design (I think) and everything is
fine in FF, Safari etc. However, in IE 6, the sidebar navigation (<div id="links"> inside the <div id="sidebar"> ) is all the way at the bottom of
the page.

Among other disturbing results in IE 6 are the
fonts are jagged and ugly looking, no matter which font-family i specify.
BTW, it looks fine in FF Windows.

I have tried specifying different positionings, which makes everything ok in
IE 6, but messes it up in FF. I have tried making a different stylesheet and
using the conditional "If IE" phrase, but this doesn't seem to work. I have also run the style sheet through validation and it came out fine. Please Help!

www.sportswestreno.com

**Centauri** · Sep 23, 2007 03:03

You have experienced IE6's doubled float-margin bug on both the content and sidebar divs - IE6 will double the width of the margin of a floated element where the margin is in the direction of the float. Inline display fixes that. IE6 also has a hard time working out 1+1=2, sometimes the answer is 3. The widths of the divs and their margins exactly equals the total width, but IE6 doesn't think it fits. You don't need the right margin on the left-floated content div, and getting rid of it cures IE6 :

Code:

#content {
	float: left;
	width: 440px;
	margin: 20px 0 20px 50px;
	display: inline;
}

#sidebar {
	float: right;
	width: 200px;
	margin: 20px;
	display: inline;
}

**rooster** · Sep 25, 2007 15:32

thank you for this! some of this does help. However, now I have a new problem with a different website in IE6-
go to: www.peakphysicaltherapy.us and you'll see that the left container
displays way too low in IE, it fine in the other browsers. I seem to be having trouble getting it to recognize the ie stylesheet, and can't seem to make that
column come up to its correct height no matter what I do....

so frustrating!

rooster

**Centauri** · Sep 25, 2007 15:45

The first line before the doctype is causing browsers to go into quirks mode - the doctype needs to be the first thing on the page.

Code:

<!-- This template is Open Source as long as the footer links are not removed. Have fun. Greetings shocktone (www.shocktone.de)-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

User Tag List

Thread: navigation too low in IE6

Thread Tools

Display

navigation too low in IE6

Bookmarks

Bookmarks

Posting Permissions