
Height Problems on Rounded Corner Buttons
Aaaand IE eats paste yet again.....
I got 2 buttons in my shopping cart working with the following CSS
Code:
#cart-buttons {
text-align: right;
}
#cart-buttons ul {
}
#cart-buttons ul li {
background-color: #4C3E05;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-border-radius: .5em;
position: relative;
padding: 6px;
}
td#cart-buttons li {
margin-left:4px;
}
li.cart-block-view-cart a, li.cart-block-checkout a {
color: #ffffff;
font-weight: bold;
}
li.cart-block-view-cart a:hover, li.cart-block-checkout a:hover {
text-decoration: none;
}
However, of all thee browsers, IE8 seems to show rounded corners properly, but the height of the brown box boundaries is almost the same height as the text. (see images). What might that be about? No idea if this present in IE9 or IE7.
http://leopardspot.endofinternet.net:80 ... magazines/ (you will have to add a cart item to see what I mean for yourself.)