Comments on: An Alernative to Negative Text Indent for Image Replacement – CSS http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/ Rob Larsen writes on entertainment, sports and culture. Thu, 26 Jan 2012 05:39:25 +0000 hourly 1 http://wordpress.org/?v= By: Richard http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-22871 Richard Mon, 07 Feb 2011 14:57:32 +0000 http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-22871 Agree with David... text-indent is so simple... why not.... the reasons I do this it's easy, screen readers / search engines still see it and you are less likely to get black listed if someone suspects you are trying to hide content / keyword stuff. I have heard rumors that opacity:0/visibility:none/display:none are not accessible by either screen readers or spiders. the overlay just takes to much effort text-indent wins hands down and it's not hacky at all it's accessible. Agree with David… text-indent is so simple… why not…. the reasons I do this it's easy, screen readers / search engines still see it and you are less likely to get black listed if someone suspects you are trying to hide content / keyword stuff. I have heard rumors that opacity:0/visibility:none/display:none are not accessible by either screen readers or spiders. the overlay just takes to much effort text-indent wins hands down and it's not hacky at all it's accessible.

]]> By: David http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-21247 David Sat, 23 Jan 2010 20:41:12 +0000 http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-21247 All methods described above have their disatvantages. The opacity-method could be even easyer with using "visibility:hidden". This method though, is not used much because there are rumours that some search-engine spiders ignore links that are hidden by CSS. Also, this method requires an extra element inside the element with the image-replacement. With an overlay div, you won't be able to click on links under the overlay. So it won't be able to link your logo to the index page. Also, for menu's this method is useless. Using negative text-indent has none of these disadvantages. It's the only method that doesn't require any changes in your HTML. And that's really a good thing for accessibility, SEO and page-load time. All methods described above have their disatvantages.

The opacity-method could be even easyer with using "visibility:hidden". This method though, is not used much because there are rumours that some search-engine spiders ignore links that are hidden by CSS.
Also, this method requires an extra element inside the element with the image-replacement.

With an overlay div, you won't be able to click on links under the overlay. So it won't be able to link your logo to the index page. Also, for menu's this method is useless.

Using negative text-indent has none of these disadvantages. It's the only method that doesn't require any changes in your HTML. And that's really a good thing for accessibility, SEO and page-load time.

]]> By: Luke Franklin http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19795 Luke Franklin Sat, 13 Jun 2009 12:07:54 +0000 http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19795 Here's my method and it's even less hacky. HTML: <div id="Banner"> <h1>Innovative Web Design</h1> <q>The greatest innovation is simplicity!</q> <div class="Overlay"> </div></div> CSS: #Banner { position: relative; width: 100%; height: 300px; text-align: center; background-color: #c5e3fa; } #Banner h1 { padding-top: 100px; } #Banner .Overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url( '../Images/Banner.jpg' ); background-position: center bottom; background-repeat: repeat; } Here's my method and it's even less hacky.

HTML:
<div id="Banner"> <h1>Innovative Web Design</h1> <q>The greatest innovation is simplicity!</q> <div class="Overlay"> </div></div>

CSS:
#Banner
{
position: relative;
width: 100%;
height: 300px;
text-align: center;
background-color: #c5e3fa;
}
#Banner h1
{
padding-top: 100px;
}
#Banner .Overlay
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url( '../Images/Banner.jpg' );
background-position: center bottom;
background-repeat: repeat;
}

]]> By: rob http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19767 rob Sat, 06 Jun 2009 23:03:06 +0000 http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19767 Hi Chris, That is simpler, but it fails in a basic way I normally use the pattern. I actually set the <A> to display:block and give it a height and width to set a hit area for clicks, so setting display:none is not an option. Hi Chris,

That is simpler, but it fails in a basic way I normally use the pattern.

I actually set the <A> to display:block and give it a height and width to set a hit area for clicks, so setting display:none is not an option.

]]> By: Chris http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19762 Chris Fri, 05 Jun 2009 21:24:11 +0000 http://www.drunkenfist.com/304/2007/03/19/an-alernative-to-negative-text-indent-for-image-replacement-css/#comment-19762 You could also use display: none on the <a/> element. Much simpler. You could also use display: none on the <a/> element. Much simpler.

]]>