The Ol' Text Indent Trick & Inline Block in IE

Rendering bug I just discovered today. IE only. You have an element with some text in it, you want to swap out the text with an image in CSS. My goto CSS trick is text-indent:-9999px. If the display is set to inline-block (which IE7 and 8 support) then not only will the text of that element be moved to the left 9999 pixels, but the entire element will be moved. This has a cascading effect on all other sibling elements, so if one of the siblings to this element is just normal display inline and doesn't have any text-indent trickery, it will still be moved 9999 pixels to the left.

Bummer.

10:47 AM | 0 Comments