Question

here is my css code for a horizontal menu, it’s cross browser and it works great, well it has 1 glitch. 🙂

The #menu which wraps everything has to have width of 100%, but when I put a border on it, the border adds to the width making it larger and screws up my layout.
What I do is use jquery to substract the 2 pixel border. Is there a way to do this with css?

here is the menu’s css:

#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 notes:
The menu has to be wrapped by a div that is used for styling background color, left margin/padding, etc. I’ve found no way to style the UL itself, because I can’t clear the float inside it. Thus the height of the OL always equals zero.

Ty very much!

Answer 1

Use outline instead of border. It creates “borders” in the same way, only it places them on the inside of the frame, rather than the outside as border does.