List navigation problem

[alemieux34]

I have a 2-tier vertical list-based navigation, that's working, but (as usual) there's a problem in IE 6.0, where a sliver of white appears below the links and above the previous links border. I can't figure out why it's there, but it doesn't happen in other browsers.

Any thoughts?

[Kotti]

Just tried it in IE6 and I can see your problem - viewed it in FF and the 2nd tier seems to roll out underneath?

D'oh! I've viewed the other version and that's fine! I'll look at it a bit more :P

[alemieux34]

Yeah,

I can't understand why it would roll underneath at all when the z-index is set to 40?

Thanks.


Just tried it in IE6 and I can see your problem - viewed it in FF and the 2nd tier seems to roll out underneath?

D'oh! I've viewed the other version and that's fine! I'll look at it a bit more :P

[Kotti]

Gah, been playing around with this for a while. Not as simple as I first thought. You've already declared the padding and margins. I tried playing around with negative attributes but had zero effect. Line heights did not seem to change anything.

I've been using horizontal lists in the past, but with only 1 tier navigation - it seems they act vastly differently from each other.

Sorry to waste your time, hopefully somebody will give you a helping hand :)

[alemieux34]

Well, thanks for trying. I'll keep hammering at it.


Gah, been playing around with this for a while. Not as simple as I first thought. You've already declared the padding and margins. I tried playing around with negative attributes but had zero effect. Line heights did not seem to change anything.

I've been using horizontal lists in the past, but with only 1 tier navigation - it seems they act vastly differently from each other.

Sorry to waste your time, hopefully somebody will give you a helping hand :)

[simplistik]

I'd help but the zip file doesn't open on a Mac... at least not my Mac :lol: if you post a URL where the code is more people may look and help.

[alemieux34]

Hmm,

That's weird. I'll try to post it elsewhere.

Thanks.


I'd help but the zip file doesn't open on a Mac... at least not my Mac :lol: if you post a URL where the code is more people may look and help.

[alemieux34]

Here's a direct link to the file: http://www.syberworks.com/list_problem/campus_nav2.html

Not sure why that white space is there.


Hmm,

That's weird. I'll try to post it elsewhere.

Thanks.

[Bmoeb]

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px 4px 5px 12px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
/* border-bottom: 0; */

ul li a {
display: block;
height: 22px;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px 4px 5px 12px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
/* border-bottom: 0; */
}

just add the height to the ul li a { }.

[alemieux34]

That closes it up a little more, but there's still a sliver of white space at the bottom of each menu item.




ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px 4px 5px 12px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
/* border-bottom: 0; */

ul li a {
display: block;
height: 22px;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px 4px 5px 12px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
/* border-bottom: 0; */
}
just add the height to the ul li a { }.