PDA

View Full Version : CSS Navigation Help I.E 6 Bug



sutton silver
Apr 21st, 2009, 11:26 AM
www.parkwaytelecom.co.uk

Help with Nav required for Internet Explorer 6 bug.

Works fine in FF, IE 7, etc. etc.

Problem:

When user rolls over main navigation (grey, 'Phone Systems', 'Lower call Charges' etc.) the div jumps up (or down, however you see it)

Been racking my brains as all the other nav's on the site work fine.. I must have just missed something.

CSS


.header_nav {
padding-top:15px;
width:723px;
height:31px;
background-image:url(images/nav/nav-x.gif);
background-repeat:repeat-x;
background-position: bottom;
padding-left: 23px;
display: block;
margin: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.header_nav ul.header_nav_grey {
margin:0px;
padding:0px;
float:left;
list-style-type:none;
display: inline;
}
.header_nav li {
margin:0px;
float:left;
display:block;
padding: 0px;
}
.header_nav ul.header_nav_grey li a:link {
margin:0px;
padding: 0px;
display:block;
float:left;
}
.header_nav ul.header_nav_grey li a:hover {
margin:0px;
padding:0px;
display:block;
float:left;
}


.header_nav li.phone_systems a {
display:block;
background-image: url(images/nav/phone-systems-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 111px;
margin: 0px;
padding: 0px;
}
.header_nav li.phone_systems a:hover, .header_nav li.phone_systems a.selected {
background-image: url(images/nav/phone-systems-nav.gif);
background-position: left -31px;

}
.header_nav li.lower_call_charges a {
display:block;
background-image: url(images/nav/lower-call-charges-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 123px;
margin: 0px;
padding:0px;
}
.header_nav li.lower_call_charges a:hover, .header_nav li.lower_call_charges a.selected {
display:block;
background-image: url(images/nav/lower-call-charges-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 123px;
margin: 0px;
padding:0px;
}
.header_nav li.mobile_phones a {
display:block;
background-image: url(images/nav/mobile-phones-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 101px;
margin: 0px;
padding:0px;
}
.header_nav li.mobile_phones a:hover, .header_nav li.mobile_phones a.selected {
display:block;
background-image: url(images/nav/mobile-phones-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 101px;
margin: 0px;
padding:0px;
}
.header_nav li.blackberry a {
display:block;
background-image: url(images/nav/blackberry-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 79px;
margin: 0px;
padding:0px;
}
.header_nav li.blackberry a:hover, .header_nav li.blackberry a.selected {
display:block;
background-image: url(images/nav/blackberry-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 79px;
margin: 0px;
padding:0px;

}
.header_nav li.vehicle_tracking a {
display:block;
background-image: url(images/nav/vehicle-tracking-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 110px;
margin: 0px;
padding:0px;
}
.header_nav li.vehicle_tracking a:hover, .header_nav li.vehicle_tracking a.selected {
display:block;
background-image: url(images/nav/vehicle-tracking-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 110px;
margin: 0px;
padding:0px;
}
.header_nav li.mobile_broadband a {
display:block;
background-image: url(images/nav/mobile-broadband-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 120px;
margin: 0px;
padding:0px;
}
.header_nav li.mobile_broadband a:hover, .header_nav li.mobile_broadband a.selected {
display:block;
background-image: url(images/nav/mobile-broadband-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 120px;
margin: 0px;
padding:0px;
}
.header_nav li.cctv a {
display:block;
background-image: url(images/nav/cctv-nav.gif);
background-repeat: no-repeat;
background-position: left top;
height: 31px;
width: 54px;
margin: 0px;
padding:0px;
}
.header_nav li.cctv a:hover, .header_nav li.cctv a.selected {
display:block;
background-image: url(images/nav/cctv-nav.gif);
background-repeat: no-repeat;
background-position: left -31px;
height: 31px;
width: 54px;
margin: 0px;
padding:0px;
}
.header_nav li.end {
display:block;
background-image: url(images/nav/end-curve.gif);
background-repeat: no-repeat;
background-position: right top;
height: 31px;
width: 25px;
margin: 0px;
padding:0px;
}

Sample HTML of the Navigation section.


<div class="header_nav">
<ul class="header_nav_grey">
<li class="phone_systems"><a href="phone-systems.html"></a></li>
<li class="lower_call_charges"><a href="lower-call-charges.html"></a></li>
<li class="mobile_phones"><a href="mobile-phones.html"></a></li>
<li class="blackberry"><a class="selected" href="blackberry.html"></a></li>
<li class="vehicle_tracking"><a href="vehicle-tracking.html"></a></li>
<li class="mobile_broadband"><a href="mobile-broadband.html"></a></li>
<li class="cctv"><a href="cctv.html"></a></li>
<li class="end"></li>
</ul>
</div>

If anyone can help, please do.
Regards,
C - Silver

SB65
Apr 21st, 2009, 12:24 PM
If you take off the 15px padding-top on .header_nav and instead add 15px padding-bottom on .two_buttons I think that will fix it.

I'm not quite sure what IE6 is doing though.....

abduraooft
Apr 21st, 2009, 12:51 PM
It might be the jump on :hover as a consequence of the re-flow (http://www.satzansatz.de/cssd/pseudocss.html#hoverjump) and there might be a fix for that. But bofore that, let me ask, why do you want to make your link text as background image? Can't you just make them as simple text in html and then apply that plain background for all your anchors? In that way, your links would be accessible to search engines and people who have blocked images in their browser.

sutton silver
Apr 21st, 2009, 02:55 PM
If you take off the 15px padding-top on .header_nav and instead add 15px padding-bottom on .two_buttons I think that will fix it.

I'm not quite sure what IE6 is doing though.....

Sorry didn't fix it...Thank's anyway.

sutton silver
Apr 21st, 2009, 02:57 PM
It might be the jump on :hover as a consequence of the re-flow (http://www.satzansatz.de/cssd/pseudocss.html#hoverjump)

Thanks. Will look into this, I can't see why I'm having this problem as all the other nav's on the site work fine, all float:left; all margin/padding 0px; where they need to be.. I'll let you know how I get on.


why do you want to make your link text as background image? Can't you just make them as simple text in html and then apply that plain background for all your anchors?

I understand this was a better way to develop the site, with regards to SEO, but it was a design request to have the custom font in the nav.

Regards,
C