For the CSS Guru...

does anyone know why the TOP bodrer on my product navList only shows up in mozilla and not in IE6 ? And why in mozilla is the top border longer than the bottom border?

its the list that reads.. multi-vitamin, electrolyte, vitamin, specialty, .....

http://www.univetnewyork.com/prods.shtml

the css for the nav list:


#navcontainer {
position:absolute;
z-index: 4;
top: 90px;
left:90px;
width:100%;
}
#navlist {
padding: 2px;
margin-left: 0px;
font: bold 10px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin:0px;
border: 1px solid white;
display: inline;
}
#navlist li a {
padding: 2px;
border-left: .5em solid #FFECD0;
border-top: 1px solid maroon;
border-right: .5em solid #FFECD0;
border-bottom: 1px solid maroon;
background: #FFECD0;
text-decoration: none;
}
#navlist li a:link {
color: Maroon;
}
#navlist li a:visited {
color: Maroon;
}
#navlist li a:hover {
border-left: .5em solid Navy;
border-top: 1px solid Navy;
border-right: .5em solid Navy;
border-bottom: 1px solid Navy;
color: Navy;
background: #B9D4F2;
}

thanks... =]

Well the problem with the border lengths is kind of hard to explain. I <i>think</i> what is happening is this.

The 1px border top and bottom is trying to create a diagonal join with the sides - it looks as though the diagonal cannont be created (as there is only 1px). You get a rounding effect and that s what is making the border seem thinner.

I'm honestly not sure why the top border will not display

hmm, this is confusing. I was playing with the border and made them all 2px, or 3px. they became thicker as expected, but i didnt notice any rounding action or diagonals. setting all borders at 2px or 3px, they are all identical. the problem just seems to be at 1px - in moz longer than bottom, and in ie6 top border is not even visible. should i just scrap whe whole idea and try somthing else?

since there are multiple products in each category, I could use one of the menu-style nav lists. I've seen js ones, is there a way to do this w/ css?

thx

Oh, sorry you won't see the diagonals unless the top/bottom borders are diferent colors to the left/right ones. The rounding I was talking about is mathematical rounding. As it can't display a diagonal with a 1px border it's all or nothing.

Yes, except it doesn't work in IE, check out
http://www.meyerweb.com/eric/css/edge/menus/demo.html

Works in mozilla firefox opera and just about anything but IE. Shame IE is used by 90% of the people.....

However, I have just thought of an Idea. You could take one of those menus and replace the :hover with a class. Then just have onmouseover="this.className='blah';"

I think that would be the most lightweight cross-browser multi-level dynamic html menu ever! Plus you could include the hover so it works in moz with javascript off. Thats a pretty cool project that I think I'm gonna do saturday morning!! Wooo

I still really don't know about the top border in IE, you could try on the csscreator.com forums, but it's so specialised there that it takes a while to get any answers.

//edit: so I got bored and made the menu. The JS is pretty lightweight but I had to do ome faffing to get it to work on IE, and I'm convinced that it will not work on Opera. But I haven't tested.

http://www.caffeinefuelled.net/tests/menu.html

Obviously needs some formatting doing to it but talk about efficient 0.5k javascript for a multi level menu