css - Substract border width from my horizontal list menu -


here css code horizontal menu, it's cross browser , works great, has 1 glitch. :)

the #menu wraps has have width of 100%, when put border on it, border adds width making larger , screws layout. use jquery substract 2 pixel border. there way css?

here 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 { display: block; width: 100%; font-size: 70%; text-decoration: none; } #menu a:hover { background: #000 none; } 

some notes: menu has wrapped div used styling background color, left margin/padding, etc. i've found no way style ul itself, because can't clear float inside it. height of ol equals zero.

ty much!

use outline instead of border. creates "borders" in same way, places them on inside of frame, rather outside border does.


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -