Question

I don’t know how to explain to you the trouble by using faux columns. So I’ll show it to us.

IN the first image you can see the faux columns rendered by Chrome. In the second by IE8. How you can see, on IE there is a different opacity, and i don’t know why.

This is the HTML code :

<div class="commentsWide">
    <div class="commentContent">
        <div class="commentsWide1">
            <a class="lblackbbu" href="index.php?explore=userview&userv=chevr">chevr</a>
        </div>

        <div class="commentsWide2">
            side A sorry i forgot to mention :P                         
        </div>

        <div class="commentsWide3">
            <div class="commentsWide3A">&nbsp;</div>
            <div class="commentsWide3B">11:06:20</div>
            <div class="commentsWide3C">30-06-2010</div>
        </div>
    </div>
</div>

And this the CSS :

.commentsWide{width:690px; float:left; background-color:#999999; color:#000000; border-bottom:1px #000000 solid; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;}
.commentContent{width:690px; float:left; background-image:url(../img/comments_background.png);}
.commentsWide1{width:120px; float:left;}
.commentsWide2{width:450px; float:left; padding-left:10px; padding-right:10px;}
.commentsWide3{width:100px; float:left; text-align:right; font-weight:bold;}
.commentsWide3A{width:20px; height:35px; float:left; padding-left:10px; padding-top:5px;}
.commentsWide3B{width:70px; float:left; text-align:right; font-size:14px;}
.commentsWide3C{width:70px; float:left; text-align:right; font-size:12px;}

Why this happens? And how can I fix this trouble?

Answer 1

It could be that the .commentContent style has a PNG background-image which IE8 still doesn’t get right.