CSS - display:none;
- Started
- Last post
- 4 Responses
- Stugoo
ok so, been CSS'in now for a good bit. In the ultimate quest for 'best practice' I'm trying to address the use of display:none; in CSS
If I have header that is a graphic I could create it as a background image and then put a span inside of it with the text hidden for example
<h1>
<span style="display:none"> Header Text</span>
</h1>or
I could not use the hidden span and merely give the text an enormous line height and set overflow:hidden; on the h1.
or
I could simply output the image on the page. but i dont want to do that as I feel as good practice it is better to have as little images as possible in the source code, keeping to the basic principles of using CSS.
I ask, that does using display:none; have adverse effects on SEO stuff (as google doesnt read stylesheets is that right?) and WAI stuff.
I feel its a bit of an open subject, and was wanting a bit of feedback... what do you think?
- doctor0
None of your methods are ideal.
I think it is much better to make a norman header, ie. <h1>My headline</h1> and move the text with CSS, and insert a background.h1 {
text-indent: -6000px;
background: #fff url(backgr.png) left center;
width: 200px;
height: 50px;
}Regarding display:none -- there's no SEO problem, and it would work fine, but this way you use less mark-up, and your CSS will be simpler.
- Stugoo0
you text indent is just another means to pusing the text down as per the second method described.
I agree simpler CSS is better.
I had heard a rumor of google thinking you were banning them with using display:none.thanks for the feedback.
- trooper0
the guidelines from google are basically "if your competitors cant complain about your use of ir then its ok"
theyre never going to ban people from using diasplay none as i use it all the time for tab style interfaces.
btw better to use text-indent:-3000px as you dont have extra code knocking about!
- Stugoo0
thanks guys. appreciated.