Check out my css code for a horizontal menu that is compatible across all browsers and functions exceptionally well, except for one small glitch. :)
The #menu element that wraps the menu items needs to have a width set to 100%. However, when I add a border to it, the border's width gets added to the total width, causing the layout to get messed up. To workaround this issue, I use jquery to subtract the 2 pixel border. Is there a pure CSS solution for this?
Here is the css code for the menu:
#menu {
width: 100%;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-right: solid 1px #555;
border-left: solid 1px #555;
border-bottom: solid 1px #555;
}
#menu ul {
margin: 0 0 0 0.5em;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
width: 20%;
line-height: 1.5em;
margin-right: 1em;
margin-bottom: 0.5em;
background: url(images/headline.jpg) top repeat-x;
border: solid 1px #555;
text-align: center;
}
#menu a {
display: block;
width: 100%;
font-size: 70%;
text-decoration: none;
}
#menu a:hover {
background: #000 none;
}
Some important points to note: The menu must be wrapped by a div for styling purposes such as background color, left margin/padding, etc. I faced difficulty in styling the UL itself due to inability to clear the float inside it, resulting in the height of the OL being zero.
Thank you very much!