[RESOLVED] IE6 Issue

[Captainkewl]

Hey guys. If you go here: http://kmkwebdevelopment.com/ You will see the navigation works fine. However, in IE6, it does not. The reason is that I had to change on part of the CSS so that the navigation displayed horizontal in IE6. The following is what I had to change (had to add inline instead of block):

Original (which is fine in firefox and IE7 & 8):
.topnav{
display:block;
height:75px;
width:980px;
}

Changed CSS for IE6:
.topnav{
display:inline;
height:75px;
width:980px;
}

Is there a way to still have the nav both horizontal and working in IE6?

[mordauk]

Try using display: block; and float: left;

[Captainkewl]

Thanks for your suggestion. I gave it a try, but when I did that, the buttons went vertical on me and they were displaying both the button and the rollover button.

[mordauk]

Can you post your entire code for the navigation?

[Captainkewl]

Sure thing:

This is the main stylesheet code:
#navigation {
width:980px;
background:url(images/nav.jpg) no-repeat;
height:96px;
}

#nav {
float:left;
width:980px;
margin-top:10px;
margin-left:38px;
}

#nav li {
float:left;
display:inline;
width:150px;
height:75px;
margin-left:0px;
}

.home, .about, .education, .portfolio, .services, .contact {
display: block;
width: 300px;
height: 75px;
background: url(images/home.jpg) no-repeat 0 0;
}

.about {background: url(images/about.jpg) no-repeat 0 0;}

.education {background:url(images/education.jpg) no-repeat 0 0;}

.portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}

.services {background:url(images/services.jpg) no-repeat 0 0;}

.contact {background:url(images/contact.jpg) no-repeat 0 0;}

.home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;} .home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}

.topnav {
display:block;
height:75px;
width:980px;
}

And this is the IE6 Stylesheet code:
#navigation {
width:980px;
background:url(images/nav.jpg) no-repeat;
height:96px;
}

#nav {
float:left;
display:inline;
width:980px;
margin-top:10px;
margin-left:38px;
}

#nav li {
float:left;
display:inline;
width:150px;
height:75px;
margin-left:0px;
}

.home, .about, .education, .portfolio, .services, .contact {
display: block;
width: 300px;
height: 75px;
background: url(images/home.jpg) no-repeat 0 0;
}

.about {background: url(images/about.jpg) no-repeat 0 0;}

.education {background:url(images/education.jpg) no-repeat 0 0;}

.portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}

.services {background:url(images/services.jpg) no-repeat 0 0;}

.contact {background:url(images/contact.jpg) no-repeat 0 0;}

.home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;} .home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}

.topnav {
display:inline;
height:75px;
width:980px;
}

[mordauk]

There are a couple of things that might be causing the problem, but not sure who the exact culprit is. It probably has to do with your 300px widths and the different display declarations.

To make it simpler, try doing it like this:


#navigation {
width:980px;
background:url(images/nav.jpg) no-repeat;
height:96px;
}

#navigation ul {
margin: 10px 0 0 38px;
}

#navigation ul li {
float:left;
display:block;
width:150px;
height:75px;
margin-left:0px;
}

.home, .about, .education, .portfolio, .services, .contact {
overflow: hidden;
}

.home {background: url(images/home.jpg) no-repeat 0 0;}

.about {background: url(images/about.jpg) no-repeat 0 0;}

.education {background:url(images/education.jpg) no-repeat 0 0;}

.portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}

.services {background:url(images/services.jpg) no-repeat 0 0;}

.contact {background:url(images/contact.jpg) no-repeat 0 0;}

.home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;}

.home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}



Then get rid of the #nav and also .topnav.

The 300px shouldn't be necessary for any reason.

I haven't tested this, but try it out and see if it works. If not, I'll put a test page together and then give you the code.

[Captainkewl]

Thanks again for the suggestion. I gave that a try, but it then incapacitated the nav links (nav buttons didn't work). I hate IE6 :(

[mordauk]

Try changing this:

#navigation ul li {
float:left;
display:block;
width:150px;
height:75px;
margin-left:0px;
}


To this:

#navigation ul li {
float:left;
margin-left:0px;
}
#navigation ul li a:link, #navigation ul li a:visited {
display:block;
width:150px;
height:75px;
}

[Captainkewl]

Hey, good call buddy! It worked! The only thing it doesn't do in IE6 is have the hover effect on the buttons, but I can definitely live with that. Thanks for your help, I really appreciate it!

[mordauk]

IE 6 only supports :hover on link elements, but as that is what you're using it on, everything should work great;)

Just add:


#navigation ul li a:hover {
. . .
}

[Kor]

Hey, good call buddy! It worked! The only thing it doesn't do in IE6 is have the hover effect on the buttons, but I can definitely live with that. Thanks for your help, I really appreciate it!
You may do that as well, as long as you will use <A> elements and give them display block. But I guess you should not consider coding for IE6 anymore. IE6 users rate is falling fast. Microsoft stoped supporting IE6 anymore and they hardly try now to replace (or to persuade users to replace) the IE6 with the latest versions (7 and now 8). Moving from IE6 to IE8 (or even IE7) should be a priority both for common users and for administrators. It is not only because IE6 is a poor browser, but because it is the most insecure (on use) browser these days.

[Captainkewl]

Thanks bud!

Cheers,
Kris.