[Solved] Disappearing button in IE7

[CraigC]

Still working out the kinks on my first site…

I have several pages with a big "Add to Cart" button for various products. I’m having trouble getting them to display correctly in IE7. For example, the link is too low on this page http://dev.craigcurry.com/piano/book/blue_curry, and doesn’t display at ALL on this page: http://dev.craigcurry.com/recordings/cd/blue_curry_cd.

CSS-wise the only difference I can see between the two is that the piano product page also has a "piano_button" class on the div:

Code:

#main_content .piano_button, body#products #main_content .piano_button {padding-bottom: 160px; padding-right: 220px;}

which the CD page doesn’t. I can add that class on the CD page and get the "Add to Cart" to appear, but then it’s still too low. I’m not really sure what to try to target to fix this.

Here’s some other possibly relevant code:

Code:

#main_content .buy_button a:link, #main_content .buy_button a:visited, #home #contact-area .button a:link, #home #contact-area .button a:visited, #about #contact-area .button a:link, #about #contact-area .button a:visited, #recordings #main_content .buy_button a:link {
background: url(../images/interface/big_button_sprite.png) no-repeat;
background-position: 0 0;
display: block;
float: left;
text-decoration: none;
width: 160px;
height: 60px;
line-height: 2.6em;
letter-spacing: -1px;
padding-top: 2px;
padding-right: 140px;
overflow: hidden;
font-size: 2em;
}
#home #contact-area .button a:link, #home #contact-area .button a:visited, #about #contact-area .button a:link, #about #contact-area .button a:visited {margin-top: 50px; margin-left: 140px;margin-bottom: 50px;}
#main_content .buy_button a:hover, #home #contact-area .button a:hover, #about #contact-area .button a:hover {
background: url(../images/interface/big_button_sprite.png) no-repeat;
background-position: 0 -65px;
display: block;
color: #9db1fb;
text-decoration: none;
width: 160px;
height: 60px;
letter-spacing: -1px;
float:left;
padding-right: 140px;
overflow: hidden;
}

If anyone could point me in the right direction or help me improve my coding I would really appreciate it. Thanks.

**update**: I got this figured out by using a conditional stylesheet for IE7.

[Author]

Posts