Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Width issue with negative text indent in CSS

When I run the code below, I see a blue box on screen.

<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style type="text/css">
                a {display:block;background:blue; text-indent:-9999px; float:left;}
        </style>
    </head>

    <body>
        <a>Hello World</a>
    </body>
</html>

How come if I change the text Hello World to HelloWorld, the blue box disappears?

Additional Notes - I am seeing this in google chrome.

like image 608
John Avatar asked Oct 21 '11 22:10

John


1 Answers

As I said in a comment, white-space: nowrap makes it disappear.

However, I'm not sure what's actually going on here. Chrome/Safari + Opera all behave in the same way and show the "blue box", whereas Firefox and IE7-9 do not show the blue box.

Your code: http://jsbin.com/igewuy

With the white-space: nowrap "fix": http://jsbin.com/igewuy/2

like image 182
thirtydot Avatar answered Sep 23 '22 16:09

thirtydot