HTML/CSS: Text-Indent

522nd Sep 2010Various, , , , , ,

When designing layouts, it’s almost always necessary to replace text with an image, like made an anchored picture, or adding the logo. Which is all fine and dandy unless dealing with links, then it gets a bit sticky.

I never really put much thought in to it before, but text-indent is a picky little bugger. For instance, in most elements you can set text-indent to -10000 and your text will be pushed off the screen to the left, leaving no scrollbar. If you set text-indent to 10000, however, the text is pushed to the far right, and you have a massive scrollable area. Another little quirk I’ve noticed is with links. Let’s say that I have the follow HTML:

1
2
3
4
5
<div id="outter">
     <ul>
           <li><a href="thisgreatwebsite.com"><div id="logo">This Great Website</div></a></li>
     </ul>
</div>

In order to turn our DIV with the ID “logo” into the actual logo, we’ll use the following CSS::

1
2
3
4
5
6
#logo {
	background: url(images/logo.png) no-repeat;
	height: 227px;
	width: 299px;
	margin: 10px auto;
}

Looking at that, we’ll have an image with the text “This Great Website” layered over it, right? Which we don’t want, right? Well, try adding “text-indent: 10000px” to your CSS definition for your logo div, and see what happens. Not much, eh? So here’s the fix:

1
2
3
4
5
6
7
8
#logo {
	background: url(images/logo.png) no-repeat;
	text-indent: 10000px;
        overflow: hidden;
        height: 227px;
	width: 299px;
	margin: 10px auto;
}

And that’s it. That will push it off to the far right (outside of our DIV), and the overflow: hidden makes everything outside of our DIV’s width invisible. Game.

5 Comments Comments Feed

  1. photoshop (June 4, 2014, 7:23 am). Reply

    Hi there just wanted to give you a quick heads up.
    The text in your article seem to be running off the screen in Firefox.
    I’m not sure if this is a format issue or something
    to do with browser compatibility but I figured I’d post to let you know.
    The layout look great though! Hope you get the problem resolved soon. Thanks

    • Anthony G. Cyphers (June 5, 2014, 1:30 pm). Reply

      Unfortunately, I can’t replicate this. I’ve tried the most recent versions of Firefox on both Windows 8 and OS X Mavericks. If you can give me some more information, I’d love to ensure that no one else has this issue.

  2. Brad (June 9, 2014, 11:40 am). Reply

    Hey! Quick question that’s completely off topic. Do you know how to make your site
    mobile friendly? My site looks weird when browsing from my iphone4.
    I’m trying to find a template or plugin that might be able to resolve this issue.
    If you have any suggestions, please share.
    Appreciate it!

  3. Anthony G. Cyphers (June 9, 2014, 5:28 pm). Reply

    There are many themes/plugins for WordPress that have good mobile flexibility. In the past I’ve used Device Theme Switcher and built a separate theme for the different mobile platforms. Nowadays, it’s best to build/buy a responsive design that looks correct on any device.

  4. learn more info (July 23, 2014, 2:49 pm). Reply

    Amazing! Its actually awesome post, I have got much
    clear idea regarding from this paragraph.

Add a Comment

Before you post, please prove you are sentient.

What is 8 times 9?