Does anybody know an easy fix for this button issue in IE 7? if you look at it in IE 7 the buttons are not aligned correctly and the rollovers don't work.
alexgv14 0 Light Poster
alexgv14 0 Light Poster
Here is the CSS code for the button.
span.button a {
background:url("images/button.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
display:inline;
color:#2d91db;
}
span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}
#main span.button a {
background:url("images/button-content.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
color:#ffffff;
}
#main span.button a:hover {
color:#ffffff !important;
}
#main span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button-content.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}
#main span.button a:hover, span.button a:hover {background-position:left bottom; }
#main span.button a:hover span.right, span.button a:hover span.right {background-position:right -42px;} diafol
Took the time to check it and it looks fine to me in Chrome and IE7.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.