IE9 / CSS / background color / padding issue

Question

I have an issue with IE9 and css. It looks like IE9 doesn't accept the padding definition of the two elements p and a. The background color shrinked and is only in the upper left corner of the elements. The following css works fine in firefox though:

<div class="slider">                        
    <p class="claim orange">Some Text</p>
    <a class="claim blue" href="">Some Link</a>         
</div>

<style type="text/css">
.slider p {
    position: absolute;
    top: -200px;
    z-index: 8000;
    padding: 0.5% 2%;
    line-height: 100%;
    color: #fff;
    white-space: nowrap;
    text-transform: uppercase;
}

.claim {
    line-height: 100%;
    font-size: 18px;
}   

.orange { background: #EF7D00 }

.blue {
    color: white;
    font-weight: bold;
    padding: 10px 15px; 
    border-color: white;
}

.blue:hover {
    color: white;
    font-weight: bold;
    padding: 10px 15px; 
    background: #2e6da4;
    border-color: #2e6da4;
    text-decoration: none;
}

</style>

What might be the issue and how can I get the background color work in IE9 in this case?

Answer 1

Your code as-is doesn't seem to display a working page, at least for me in Chrome or Firefox. The p element containing "some text" is displaying with top: -200px, off the page to the top, and the background is white so I can't see anything until I mouseover the link.

Did you forget to include some key lines in your code? Try pasting everything into a text file and testing it out, before uploading it in a question, or it's going to be hard for us to help you.

It's not clear to me what you're trying to do here!