0
The HTML is a generic UL within a named DIV, and within the list items there are links. The links themselves are styled as the buttons. So a quick and dirty example is:
<div id='mainMenu'> <ul> <li><a href=#>This is link 1</a></li> <li><a href=#>This is link 2</a></li> <li><a href=#>This is link 3</a></li> </ul> </div>
My CSS in general terms looks like this for the button styles:
#mainMenu ul {
padding: 0px;
margin: 0px;
}
#mainMenu li {
display: inline;
}
#mainMenu li a {
font-family: Verdana, Arial, Sans-Serif;
font-size: 12pt;
background-color: #AAA;
border: 2px solid #999;
border-color: #BBB #999 #999 #BBB;
color: black;
padding: 1px 3px;
bottom: -2px; /* reccommended because of a XHTML 1.0 Transitional Doctype */
}
#mainMenu li a:hover {
border-color: #999 #BBB #BBB #999;
}
As you can see it makes a simple buttonized appearance and on hovering inverts the bevel to make it look inset. I haven't tested these colors so no promises that they look good, but they get the idea across. However in IE6 no top border appears, regardless of the "bottom: -2px;" fix reccommended by a JS/CSS site I frequent (I won't point fingers). I have attached the demonstration code, and I wonder about a fix for this.
What am I doing wrong with my CSS/HTML and/or how do I work around IE6? Since most my clients will be using IE6 I have no choice but to support it, but I'm at a loss for how.
Thank you for any help!
Attached Files
-
Untitled.html 826bytes
265 downloads
