How can I solve this IE CSS Issue?

Question

Look here (http://www.makeofficebetter.com/comments.htm) for a link to an example of my problem.

If you look at that link you'll see that I have a IMG floated left, and a DIV overlaying it. within that div I have 2 more divs. Both should overlay the IMG, but for some reason only the first DIV overlays correctly...and the 2nd does not. It refuses to overlay my IMG. Both are children of a DIV that is overlaying the IMG.

This seems to be only a problem in IE8 Compatibility Mode...so I guess that means it also looks bad in IE7. You can toggle Compatibilty mode off and on to see the problem and I've added color to my DIV backgrounds so you can see the issue better.

Safari and Firefox work fine.

Answer 1

Use DRY concepts with your CSS, this might help weed out the problem.

For example instead of having two classes .comment and .mod-comment (both with identical subclasses), only use .comment and when a moderator posts, add a second .mod class.

Example:

current

<div class="comment">...</div>
<div class="mod-comment">...</div>

DRY

<div class="comment">...</div>
<div class="comment mod">...</div>

This way, you can style comment, and stick the differences for mod comment in .mod

Answer 2

The problem is that the avatar is taking up space that the bubble wants. IE7 won't let them overlap. I tried adding this CSS - as far as I can tell that will solve it for IE7 without breaking in Firefox. I suggest more testing or making this CSS conditional for IE7 only.

 .comment .avatar {
  margin-right: -22px;
 }
 .mod-comment .avatar {
  margin-left: -22px;
 }

Hope this helps!