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
Post a Comment