|
 |
|
|
|
| Thread title: I keep reading comeplling articles about this CSS hack |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
11-28-2010, 12:07 AM
|
#1
|
Status: Junior Member
Join date: Mar 2009
Location:
Expertise: Investment
Software: Photoshop & phpDesigner
Posts: 59
|
 I keep reading comeplling articles about this CSS hack
The following CSS hack is used by a lot of sites. I've read that Google punishes the web administrator by dumping the SERPs because this hack is most commonly used by spammers to place lots of hidden keywords off the screen.
HTML Code:
text-indent:-9999px;
Or this other one I've seen on Smashing Magazine.
HTML Code:
text-indent:-9999em;
And in a blog post comment I read that you could use the following, but it wouldn't be as good as the above two.
What are your views or practices to get that unsightly text off the screen without being penalized.
|
|
|
|
11-28-2010, 12:48 AM
|
#2
|
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
Posts: 3,164
|
I'd only ever use text-indent when a background is underneath with wording I cannot style in CSS, mainly submit buttons.
|
|
|
|
11-28-2010, 01:22 AM
|
#3
|
Status: Junior Member
Join date: Mar 2009
Location:
Expertise: Investment
Software: Photoshop & phpDesigner
Posts: 59
|
Exactly. I should have mentioned in my question that I was looking for an alternate technique/hack I can use if I need to make a header image or logo/branding link back to the homepage of the site, and I want all the area to be responsive (change the pointer to a hand).
I can only see myself using text-indent there and submit buttons for forms, as you said, in that kind of situation.
|
|
|
|
11-28-2010, 01:54 AM
|
#4
|
Status: #pugs {display: block;}
Join date: Jan 2007
Location: Chicago
Expertise: CSS, HTML, PHP
Software: Sublime Text 2
Posts: 1,187
|
|
|
|
|
11-28-2010, 09:45 PM
|
#5
|
Status: Junior Member
Join date: Mar 2009
Location:
Expertise: Investment
Software: Photoshop & phpDesigner
Posts: 59
|
Jordan, thanks for the info. I knew they were different units of measure, but never saw a physical chart explaining the difference between px and em. Your link just explained it to me, and I've bookmarked it for future reference. 
I had already read the latter two blog posts, but the first one has just reassured me that it's okay to use in certain situations pending what it is you have to do.
Cheers
|
|
|
|
11-29-2010, 01:56 PM
|
#6
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
It's worth noting at this stage the reasons behind using em over px/pt. In non IE browsers users can zoom in and out and the font size will change accordingly when it is set in px/pt. However in IE it wont. Therefore, if you want to enable that functionality, which for usability options you should, it is better to set it in em.
It is also worth wondering why google may not value display: none as much as using a text indent. That is primarily semantics. By declaring an element's display property as none, you are essentially telling the browser that it need not be displayed and thus it has very little semantic value. Whereas a text-indent means the element still holds enough value to be displayed, but its position is changed.
|
|
|
|
11-30-2010, 05:37 AM
|
#7
|
Status: Junior Member
Join date: Mar 2009
Location:
Expertise: Investment
Software: Photoshop & phpDesigner
Posts: 59
|
Originally Posted by Gaz 
It's worth noting at this stage the reasons behind using em over px/pt. In non IE browsers users can zoom in and out and the font size will change accordingly when it is set in px/pt. However in IE it wont. Therefore, if you want to enable that functionality, which for usability options you should, it is better to set it in em.
It is also worth wondering why google may not value display: none as much as using a text indent. That is primarily semantics. By declaring an element's display property as none, you are essentially telling the browser that it need not be displayed and thus it has very little semantic value. Whereas a text-indent means the element still holds enough value to be displayed, but its position is changed.
|
Noted. I didn't know that IE wouldn't interpret it correctly, then again, I'm not very surprised; it is IE after all.
I created this thread solely because I logged into the Tuts' network and downloaded a video series one of their editors created. The video series was "PSD > WordPress", and he assigned an 'h1' tag to the site's logo, and then used "text-indent:-9999px;" in the CSS file to hide the the initials of the logo. I went onto Smashing Magazine and saw they did the same, but they used the "em" unit of measure, which is the proper unit a person should use, according to your post.
HTML Code:
#header h1 {
background: url(img/logo.png) no-repeat;
width: 169px;
height: 71px;
text-indent: -9999px;
float: left;
}
|
|
|
|
11-30-2010, 06:33 AM
|
#8
|
Status: #pugs {display: block;}
Join date: Jan 2007
Location: Chicago
Expertise: CSS, HTML, PHP
Software: Sublime Text 2
Posts: 1,187
|
There are points (pt) as well  . Truthfully, I usually use pt/em for type and when it comes to the grid itself, I'll stick with pixels.
For the text-indent, it doesn't matter if you use pt, em or px since it's just used to force the text off of the page.
|
|
|
|
12-08-2010, 06:24 PM
|
#9
|
Status: Member
Join date: Aug 2007
Location: SF
Expertise: Coder
Software: Sublime Text, Google Chrome
Posts: 211
|
I use text-indent mostly for just "alt-text" on background images. Logos, footer images, headers, etc. It helps with SEO a lot.
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed