Website misbehaving in IE6

**bazzablue** · Apr 2, 2009, 10:01

Anybody able to tell me why this (site is a mess in IE6?

Works fine in IE7 and 8, Firefox and Safari. Validates as well.

I do seem to have a stray > under the left hand menu. Can't work out where that has come from!!!!

Thanks in advance.

**RyanReese** · Apr 2, 2009, 10:31

There are a number of issues on your site...just by looking at the CSS.

Code:

*{margin:0;padding:0;}

Browsers add default margins and paddings to everything. This will 0 it out and I have outlined it here. It has a 0,0,0,0 specificity so it will be overridden, don't worry.

Next, you need to contain your floats. Add overflow:hidden; to #container. This is the easiest way.

Code:

	float: left;
	margin: -160px 0 0 80px;

"ul#nav" triggers IE6's double float margin bug. Give it display:inline; as the fix.

The same thing happens to

Code:

.image {
	float: left;
	margin: 10px;

AND "ul.format"

**bobsmithmoodeyit** · Apr 2, 2009, 10:34

You have it covered RyanReese! It's the dreaded double float margin bug. You could use conditional statement for ie to isolate the issue.

**RyanReese** · Apr 2, 2009, 10:36

No, as said before it is easy to fix. Read the article. All you need to do is add display:inline; to the floated element.

**bazzablue** · Apr 2, 2009, 13:34

Ryan,

Thanks for the response. I have inserted the code you suggested but things still do not look right in IE6. The content area still moves down and across to the left. And the left nav bar disappears when hovered over.

It's a pain but I need to get this right in IE6 as it is still widely used in this organisation.

Thanks.

**Rayzur** · Apr 2, 2009, 15:27

Hi,
The current problem has nothing to do with the #content div. The problems are in the nav.

Remove the display:block on the ul#nav, it is overriding the inline fix for IE6.

Then replace the display:block with a left float on the ul#nav li a

Those two changes will snap everything in place in IE6

Code:

ul#nav {
    float: left;
    margin: -160px 0 0 80px;
    width: 180px;
    height: 306px;
    display: inline;
    /*display: block;*/
    background:red url(../graphics/left_nav.jpg) no-repeat;

}
ul#nav li {
    list-style-type: none;
    margin: 0;
    
}
ul#nav li a {
    border: 0;
    float:left; /*was display:block;*/
    background: url(../graphics/left_nav.jpg) no-repeat;
    text-indent: -9999px;
    
}

**Rayzur** · Apr 2, 2009, 15:37

It looks like you will need to slightly readjust your background positions on the anchors when using the float though.

**bazzablue** · Apr 2, 2009, 15:37

Rayzur,

Fantastic - that works a treat.

I have one more problem in IE6 with the left navigation.

If you hover over the navigation it starts jumping around - it gets worse the lower you go.

If I remove the background image from ul#nav the image disappears briefly before the hover state shows up.

Neither of these is ideal. Can you or anybody else advise on this issue?

**bazzablue** · Apr 2, 2009, 15:53

Ignore that last bit I have sorted it out. Changed the height on the individual 'a' elements in the nav list. Weird how it worked ok in FF, IE 7 and 8 before and after I made this change. Works in IE6 now but there is a delay before the hover state works. I can live with that though!

**Rayzur** · Apr 2, 2009, 15:58

Here is a cross browser workaround. I had some code here previously but scrapped it. The problem was the display:inline; on the ul#nav for IE6. By removing the left margin off 80px and positioning it relative to itself we can remove the IE6 fix and get consistency without the inline display interfering.

Code:

ul#nav {
    float:left;
    margin: -160px 0 0 0;
    position:relative; 
    left:80px;
    width: 180px;
    height: 306px;
    background: url(../graphics/left_nav.jpg) no-repeat;
}
ul#nav li {
    list-style-type: none;
    margin:0;
    padding:0;
}
ul#nav li a {
    border: 0;
    display:block;
    background: url(../graphics/left_nav.jpg) no-repeat;
    text-indent: -9999px;
}
li#nav01 a {
    width: 180px;
    height: 42px;
}
li#nav02 a, li#nav03 a, li#nav04 a, li#nav05 a, li#nav06 a, li#nav07 a, li#nav08 a {
    width: 180px;
    height: 30px;
}
li#nav09 a {
    width: 180px;
    height: 61px;
}
li#nav01 a:link, li#nav01 a:visited {
    background-position: 0px 0px;
}
li#nav01 a:hover {
    background-position: -180px 0px;
}
li#nav02 a:link, li#nav02 a:visited {
    background-position: 0px -42px;
}
li#nav02 a:hover {
    background-position: -180px -42px;
}
li#nav03 a:link, li#nav03 a:visited {
    background-position: 0px -71px;
}
li#nav03 a:hover {
    background-position: -180px -71px;
}
li#nav04 a:link, li#nav04 a:visited {
    background-position: 0px -100px;
}
li#nav04 a:hover {
    background-position: -180px -100px;
}
li#nav05 a:link, li#nav05 a:visited {
    background-position: 0px -129px;
}
li#nav05 a:hover {
    background-position: -180px -129px;
}
li#nav06 a:link, li#nav06 a:visited {
    background-position: 0px -158px;
}
li#nav06 a:hover {
    background-position: -180px -158px;
}
li#nav07 a:link, li#nav07 a:visited {
    background-position: 0px -187px;
}
li#nav07 a:hover {
    background-position: -180px -187px;
}
li#nav08 a:link, li#nav08 a:visited {
    background-position: 0px -216px;
}
li#nav08 a:hover {
    background-position: -180px -216px;
}
li#nav09 a:link, li#nav09 a:visited {
    background-position: 0px -245px;
}
li#nav09 a:hover {
    background-position: -180px -245px;
}

**bazzablue** · Apr 3, 2009, 04:25

Is this better, for any reason, than the previous fix which seems to work fine in all the main browsers?

If not then I will leave it as everything seems to be working fine.

Thanks for your help. It is much appreciated.