html - positioning and glitchy navigation button issue -


i working on website , want have navigation bar set bottom right hand corner of div. have gotten in place, however, every time hover on button weird glitch occurs places hover'ed buttom right position. can't seem figure out solution issue (whatever needs ie friendly).

tested in chrome, ff, , safari. same.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style>  #head {     width: 80%;     height: 80px;     position:relative;     margin-left:auto;     margin-right:auto;     background: #56a0d3;     background-image:url(/image/bubblestall.gif);     z-index: 5000;     padding-top:5px;     color: #ffffff; }  .menu {     float:right;     width:80%;      position:absolute;     bottom:0px;     right:0px;     margin-right:0px;     text-decoration:none;     height:auto; } .menu li {     float:right;     text-decoration:none;     list-style-type:none; }  #nav a:hover, #nav a:focus {     color:#ffffff;     background:#009999;     text-decoration:none;     font-size: 14px;     right: 0px;     bottom: 0px;     position: absolute; }  .menu {     float: left;     display:block;     text-align:center;     color: #5ccccc;     background: #006363;     font-size: 12px;     font-weight:200;     text-decoration:none;     font-size: 14px;     position:relative;     padding-left:5px;     padding-right:5px; }  </style> </head>  <body> <div id="head">logo <div class='menu'>         <ul id="nav">           <li><a href="index.html">home</a></li>           <li><a href="about.html">about us</a></li>           <li><a href="gallery.html">gallery</a></li>           <li><a href="programs.html">programs</a></li>           <li><a href="prospective.html">prospective clients</a></li>           <li><a href="contact.html">contact us</a></li>       </ul>  </div> </div>    </body> </html> 

looks thought css problem. seems little contradictory.

try following:

html

<div id="head">logo <div class='menu'>         <ul id="nav">           <li><a href="index.html">home</a></li>           <li><a href="about.html">about us</a></li>           <li><a href="gallery.html">gallery</a></li>           <li><a href="programs.html">programs</a></li>           <li><a href="prospective.html">prospective clients</a></li>           <li><a href="contact.html">contact us</a></li>       </ul>  </div> </div> 

css

#head {     width: 80%;     height: 80px;     position:relative;     margin-left:auto;     margin-right:auto;     background: #56a0d3;     background-image:url(/image/bubblestall.gif);     padding-top:5px;     color: #ffffff; }  .menu {     float:right;     position:absolute;     bottom:0px;     right:0px;     text-decoration:none;     height:auto; }  ul#nav li{     float:left; }  ul#nav li a, ul#nav li a:visited{     color:#ffffff;     background:#009999;     text-decoration:none;     display:block;     padding:5px; }  ul#nav li a:hover, ul#nav li a:active{     color:#ffffff;     background:#ff0000;     text-decoration:none; } 

here's working example: http://jsfiddle.net/ymeka/1/


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -