Mark Wiens - Art & Design: Gab: IR and Hiding Text: Redux

February 23, 2005

IR and Hiding Text: Redux

Update: The use of position: relative seems to work well for IR, but position: absolute should still be used for hiding text. Replacing absolute with relative on my own site showed unwanted side effects. I know, I know. I should really test my work thoroughly.

Now works flawlessly with IE5/Mac!

After changing the positioning from absolute to relative, I’ve now successfully tested this technique in the following browsers: IE5/Mac, IE5.x, IE6, Mozilla, Netscape 6/7, Opera, Firefox, and Safari.

<h2 class="ir">
    <span class="hide">My header text</span>
</h2>

h2.ir {
    background-image: url("/imogen/cunningham.gif");
    height: 20px;
    width: 60px;
}

.hide {
    position: relative;
    left: -9999px;
    font-size: 0;
}

Here is an example.

Comments

Hi Mark,

that’s an elegant solution. So what I understand from your articles, is that the following solution has problems in IE5/mac:

html:

html:

div id=”header” h2 My Site h2 div

css:

#header {

height:100px;

position:relative;

}

#header h2 {

position: absolute; left: 0; top: 0;

height:50px;

width:100px;

background: url(image.gif);

text-indent: -5000px;

}

Untill now I used this technique. However I didn’t test in IE5mac.

(ps. html code looks funny, i know, but i couldnt get the textile to do what i wanted

ps2. Can’t I place a comment without my email adress showing up?)