css IE problem

I have this html

<div class="p-box">
        <div class="p-img"></div> 
        <h3>title</h3>
        <div class="txt">some txt</div>
     </div>

with this css.

    .p-box {
    width:253px;
    height:155px;
    position:relative;
    float:left;
    overflow:hidden;
    background: url(../images/p-box-bg.png) top left no-repeat;

}
.p-box h3 {
    color:#FFF;
    width:253px;
    text-align:center;
    font-size:12px;
    height:22px;
    line-height:22px;
    display:block;
}
.p-img {
    position:absolute;
    top:1px;
    left:1px;
    width:253p开发者_StackOverflow社区x;
    height:155px;
    z-index:5;
    background: url(../images/p-img-bg.png) top left no-repeat;

}
.p-box .txt{
    width:249px;
    height:20px;
    background: url(../images/p-img-txt-bg.png) top left no-repeat;
    position:absolute;
    bottom:2px;
    left:2px;
    z-index:50;
    text-align:right;
    color:#FFF;
    font-size:12px;
    line-height:20px;

}

In firefix all ok, but in IE i can't see my H3 over the p-img and p-img don't feel the container overflow.. can anyone help me?? Thx.

I would recommend on your H3, set it to something more particular, ie: an id. Once done, set the background image in the new id tag, not the H3 element in css. so:

.p-box #h3image {
    color:#FFF;
    text-align:center;
    font-size:12px;
    display:block;
    enter code here
    width:253px;
    height:22px;
    padding-top: 133px;
    z-index:5;
    background: url(../images/p-img-bg.png) top left no-repeat;
}

Note that the padding-top 133 px + height of 22px will make the entire height of the container 155px; being the size of your image. As the padding from the top is 133, this will leave 22px for the text to be in place, as the image is a background, text is in the foreground, fully seo compliant and browser compatible.

:)

As some articles allude with on IE's z-index bug, give the h3 element a high z-index (at least, higher than the z-index=5 given to .p-img).