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> enter image description here

<!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

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -