html - background color of <a href> not displaying properly inside list -
i'm trying create tab buttons putting hyper links inside list within unordered list. after want change color of tab when mouse hovered on it. in below code able change color green it's not covering tab, instead space exists on right , left side of link <a> 
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <style type="text/css"> #header ul { list-style: none; margin: 0; } #header li { float: left; padding:10px; padding-left:12px; border: 1px solid #bbb; background:red; margin: 0; } #content { clear:both; } #header { text-decoration: none; padding: 10px; text-align: center; color:#000000; } #header a:hover { background:#00ff00; } #header{ position:relative; top:20px; } #content{ position:relative; top:60px; } </style> </head> <body> <div id="header"> <h1></h1> <ul> <li><a href="#">this</a></li> <li id="selected"><a href="#">that</a></li> <li><a href="#">the other</a></li> <li><a href="#">banana</a></li> </ul> </div> <div id="content"> <p>content here .....</p> </div> </body> </html>
see fiddle: http://jsfiddle.net/easwee/z5dg6/3/
your a has block element takes full width of li. removed padding li , added only. can play js fiddle.
Comments
Post a Comment