Cross-browser padding/margins
- by Lucifer
Hi All,
I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
And here's a demo of what it actually looks like:
The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck!
Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers?
Update:
HTML (The menu):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="support.php">Support</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="myaccount/" class="myaccount">My Account</a></li>
</ul>
The CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
