Text for <a></a> tags does not show up in Internet Explorer (7-8) with a background-image defined

Alright, I feel dumb asking this but I am having issues with a stylized anchor tag and dis开发者_如何学Goplaying 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.

---

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.

---

I've just written a guide for you. Make sure that you follow these steps, and -perhaps- edit your question to be more specific. Currently, we can only guess and find the problem by trial&error.

Steps to debug your CSS code (yes = next step, no = see below):

1. Ensure that the problem is caused by CSS
   Disable JavaScript. Does the problem persist?
2. What's the source
   Temporary disable all specific selectors, eg: <a class="foo bar"> > <a x-class="foo bar">. Did the problem disappear?^[2]
3. Which selector?
   Add all selectors, one by one. When a newly added selector is causing problems, disable all selectors, and use the same selector to make sure that the problem is caused by this selector only.
4. Which property?
   Disable all lines, and add enable a few lines (block) of the CSS code. When the problem shows up after re-adding a block, remove the just-added block, and add the properties back, one by one.
5. Cause found
   Use Google, Stack overflow or the Mozilla Developer network to find documentation about the property. Perhaps, you've used the property in a wrong way.

^[2] The problem is caused by a tag selector, or an inherited style.

---

I can see the text in the orange buttons just fine in IE8 on Win7.

Your hover for the border color doesn't work on them though in IE8, but that is because of the VML used for the rounded corner effect. I have experimented a lot with VML and it causes tons of problems for element layouts.

I would check to see if removing the border-radius-5 class fixes the problem. That way you can see if that is causing the text problem you are seeing.