html - Border-bottom 1px too long on both sides CSS -
what doing: on hover of button addding border-bottom of 5px.
js fiddle: http://jsfiddle.net/mucnb/
problem:
the problem border bottom extends 1px far on both left , right side.
question:
does know how fix this?
relevant code:
#main-nav li { display: block; padding-top: 15px; text-align: center; height: 35px; font-size: 18px; line-height: 18px; color: #fff; text-decoration: none; background-color: #00a0c8; } #main-nav li a:first-child, #main-nav li a:nth-child(2) { width: 224px; border-right: 1px solid #ffffff; } #main-nav li a:nth-child(3) { width: 225px; } #main-nav li a:last-child { width: 224px; border-left: 1px solid #ffffff; } #main-nav a:hover { height: 30px; border-bottom: 5px solid #0bc6f5; }
since css borders 'miter' @ edges, you're going notice phenomenon. work around this, i've created rules highlight li
behind a
on hover. creates effect getting clean border @ bottom. can retain white separators between elements then.
css
* { margin: 0px; padding: 0px; outline: none; } #header { background-color: #00a0c8; min-height: 118px; } #headercontent { width: 980px; min-height: 118px; margin: 0 auto; background-color: #00a0c8; } nav { width: 980px; margin: 0 auto; } nav li { border-left: 1px solid #fff; /* added border nav li */ display: block; float: left; height: 50px; /* give height */ } #main-nav li:hover { background: #0bc6f5; /* give background color li on hover */ } nav li:first-child { border-left: none; } #main-nav li { display: block; padding-top: 15px; text-align: center; height: 35px; font-size: 18px; line-height: 18px; color: #fff; text-decoration: none; background-color: #00a0c8; } #main-nav li a:first-child, #main-nav li a:nth-child(2) { width: 224px; } #main-nav li a:nth-child(3) { width: 225px; } #main-nav li a:last-child { width: 224px; } #main-nav li a:hover { height: 30px; }
hope helps.
Comments
Post a Comment