PDA

View Full Version : ie can't hide the text with text-indent


mampwamp2
09-12-2012, 07:57 AM
i want to hide the text and using text-indent:-9999px;
but the text still can't be hide, which part is wrong?

html
<ul class="links inline">
<li class="node_read_more"><a href="google.com">read more</a></li>
</ul>

style.css
ul.links li.node_read_more{
background:url(../images/readmore.jpg) 0 0 no-repeat;
width:86px;
height:18px;
}
ul.links li.node_read_more a{
color:#000;
text-indent:-9999px;
}

gentleone
09-12-2012, 08:06 AM
You need to add display: block. Or inline-block if you want to keep it inline, but then you still will see the bullet.

ul.links li.node_read_more a{
display: block;
color:#000;
text-indent:-9999px;
}

Corrosive
09-12-2012, 08:57 AM
I think this is only an issue with IE7 and below yes? If so, use a conditional stylesheet to target earlier IE and set text to 'display: none;'. Hopefully as you standard styles will still use indent, Google won't see it as an attempt to keyword stuff/hide content.

gentleone
09-12-2012, 09:50 AM
I think this is only an issue with IE7 and below yes? If so, use a conditional stylesheet to target earlier IE and set text to 'display: none;'. Hopefully as you standard styles will still use indent, Google won't see it as an attempt to keyword stuff/hide content.

I did a quick test only in Chrome, Safari, Firefox and Opera on the Mac and see there are slightly differences.

Chrome & Safari are removing the bullets when setting the display to block while Firefox and Opera keep showing the bullets.

Don't know what it does in IE. Too lazy to fire up my Virtual Machine. :)

Test page: http://cssdesk.com/a5ahF

EDIT: By the way... text-indent alone, doesn't do anything in all of these browsers which is I believe a natural behavior.

mampwamp2
09-13-2012, 09:27 AM
I did a quick test only in Chrome, Safari, Firefox and Opera on the Mac and see there are slightly differences.

Chrome & Safari are removing the bullets when setting the display to block while Firefox and Opera keep showing the bullets.

Don't know what it does in IE. Too lazy to fire up my Virtual Machine. :)

Test page: http://cssdesk.com/a5ahF

EDIT: By the way... text-indent alone, doesn't do anything in all of these browsers which is I believe a natural behavior.


thank you very much.

domedia
09-13-2012, 04:21 PM
If it is a block element, a negative text-indent will shoot the text off the page, basically hiding it.

<div id="promo">John Denver tribute</div>

Example:
div#promo {
height: 100px;
width: 200px;
text-indent: -9000px;
background-image: url(promo.png);
}

mampwamp2
09-19-2012, 12:03 PM
If it is a block element, a negative text-indent will shoot the text off the page, basically hiding it.

<div id="promo">John Denver tribute</div>Example:
div#promo {
height: 100px;
width: 200px;
text-indent: -9000px;
background-image: url(promo.png);
}

thank.;).........