Web Design Tips: Text Replacement with Float:Left and Text-Align Right

This week while we were working on a web design project for an Indianapolis client, we ran into a common issue with Image Replacement.

Image Replacement has been covered by several reputable sources on the web. The purpose of this post is not to provide a tutorial on Image Replacement, but to discuss some common issues that can happen while working with the technique.

Our client's Header required a logo on the left and a Title on the right (a pretty common scenario). We decided to use an H1 tag for the logo and an H2 for the title of each page, using Image Replacement for the logo and allowing the title to remain natural text.

Our HTML ended up looking like this:

<div id="Header">
<h1 class="logo">Client Name in Text</h1>
<h2>Welcome to the Client's website</h2>
</div>

In our style sheet (CSS) we set the Header to text-align:right to align the H2 to the right of the page:

#Header {
text-align:right;
}

To get the H1 back to the left, we floated it to the left and then applied our standard Image Replacement techniques.

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:-9999px;
}

We found that by using the text-indent method inside of a div that was set to text-align:right caused us some issues. The text did not move off the page, instead it remained over the logo. The next thing we tried was changing the text indent to a right-directional (positive) value instead of a left-directional (negative) value:

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:9999px;
}

This caused more issues. While it worked fine in FireFox, Safari, and Chrome it caused Internet Destroyer... (sorry, Internet Explorer) to allow you to scroll right by 9999 pixels until you could see the text that we wanted to hide.

In the end, the solution was very simple. We just set a text-align:left value to our H1 and we were back to a solution that was cross-browser compatible.

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:-9999px;
text-align:left;
}

Be sure to set your text-indent value back to negative. Please drop a comment if this article helped you in any way, or if you have tips for how we can improve the format.

Thanks and happy coding! Do you Digg it?