Hello. I’m trying to create a fairly complex (for me) navbar, and I’m having trouble getting it to render correctly in multiple browsers.
[URL=”http://www.randyjharvey.com/test.html”]http://www.randyjharvey.com/test.html
It looks right in Firefox 3, is missing 1px of padding in Safari, and is completely wrong in IE6. I’m shifting pixels back and forth to try and make it work, but I feel like I’m just hacking around blindly. Can anybody help me out?
here’s the CSS
[CODE]*{
margin:0;
padding:0;
}
#menu_services {
width:273px;
}
#menu_services li {
list-style-type:none;
padding-top:0px;
border-top:0px solid #bfbda8;
}
#menu_services span {
color:#44291f;
font-size: 18px;
font-family:georgia, times new roman, times, serif;
display:block;
}
#menu_services li a {
display:block;
text-decoration:none;
color:#595959;
padding:21px 7px 20px 75px;
font-size: 12px;
font-family: ‘trebuchet ms’, Verdana,Arial,Helvetica,sans-serif;
}
#menu_services li a:hover {
background:#bfbda8;
}
li#buy {
margin: 0px;
background: none;
}
li#buy a {
padding:21px 7px 19px 75px;
background: #d1d2ba url(img/nav-buy.jpg) no-repeat top left;
background-position:0 0;
}
li#buy a:hover {
background: #bfbda8 url(img/nav-buy.jpg) no-repeat top left;
background-position:0 -90px;
}
li#book {
margin: 0px;
background: none;
}
li#book a {
padding:21px 7px 19px 75px;
background: #d1d2ba url(img/nav-book.jpg) no-repeat top left;
background-position:0 0;
}
li#book a:hover {
background: #bfbda8 url(img/nav-book.jpg) no-repeat top left;
background-position:0 -90px;
}
li#hire {
margin: 0px;
background: none;
}
li#hire a {
padding:21px 7px 18px 75px;
background: #d1d2ba url(img/nav-hire.jpg) no-repeat top left;
background-position:0 0px;
}
li#hire a:hover {
background: #bfbda8 url(img/nav-hire.jpg) no-repeat top left;
background-position:0 -90px;
}
and the HTML
[code=html]<ul id = “menu_services”>
<li id=”buy”><a href = “http://intereactive.net/”><span>Buy Products</span>DVDs, Books, & CDs to help you improve your presentation skills
</a></li><li id=”book”><a href = “http://intereactive.net/portfolio”>
<span>Book Randy</span> & keynotes to energize you and your audience.
</a></li><li id=”hire”><a href = “http://intereactive.net/whoweare”>
<span>Hire Randy</span>Improve your public speaking skills 100% or more by next year.
</a></li>
</ul>