Question

Alright,
I feel dumb asking this but I am having issues with a stylized anchor tag and displaying both a repeating background image and text in IE7/8. My code works fine in Firefox, IE9, Chrome, and Safari but in IE7/8 the text will not show up.

My PHP is outputting something like this:

<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>

My CSS for this element looks like this:

.anchorButton {
    background-image: url("./images/button-gradient.png");
    height: 52px;
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 0 0;
    float: left;
    line-height: 52px;
    font-size: 1.4em;
    color: #fff;
    border: 3px solid #a8a8a8;
    margin-top: 10px;
    padding: 0 15px;
    z-index: 900;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    color: #fff !important;
    text-shadow: -1px -1px #707070 !important;
    display: block;
}

To see what I am talking about you can visit: dtelepathy.swampedpublishing.com. If you look at the site in Firefox and IE7/8 you will see that the Orange ‘buttons’ that I made out of anchor tags do not show the text in IE.

I am willing to give whatever a shot as I am REALLY unsure what is going on here.

Answer 1

I don’t have IE7/8 to test, but this sounds suspiciously like a variation on the IE peek-a-boo bug. Maybe some of the changes suggested around the interwebs will help.