Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I've been trying to find a good image replacement technique and after coming across http://wd.mrclay.org/tests/ir/ I settled on Levin's technique.
After I implemented it (with my transparent GIF images), I realized the h2 text shows through and that the technique sort of requires a solid-background image.
In my quest for the right technique, I noticed the use of text-indent: -1000em in a couple. So I thought maybe a hybrid technique would work. I added the rule to Levin's:
#tagline, #tagline span {
float: right;
height: 15px;
width: 410px;
background-image: url(../images/h_tagline.gif);
text-indent: -1000em;
}
and the original text disappears like I want it to. I tested in Mac FF 1.5.0.1, Safari 2.0.3, and Win IE 6, and they all seem to display it just fine.
Here are my questions:
1. Is there a better technique?
2. Is it a bad idea for any reason to hack the technique like this?
I can't say I'm a CSS expert, so I need some help. You can check out the site I'm working with it at http://www.bsu.edu/wipb/redesign/
Thanks!
Rob -
- CommentAuthorNick Presta
- CommentTimeMar 22nd 2006
I've always liked the Phark Method (IIRC).
h1 { text-indent: -1000em; background: url('path/image.ext') no-repeat; display: block; height: xxx; width: xxx; }
It works everywhere but screen readers have a problem with it. If you have an audience of people using screen readers, that could be a problem but I always thought that if you're using a screen reader, you would turn off CSS anyways. -
Hmm.. doesn't really work for me. The h2 jumps the containing div... also, I checked mezzoblue's page in IE5 Win and neither Phark image showed up.
Other thoughts?
Rob -
What do you mean by the h2 jumps the containing div? Can you show a test page?
Also if ie5 is having problems just hide the IR technique from is so it just gets a text heading. No point trying hard to impress ie5 users if they even exist.
Using text-indent shouldn't cause a problem for screen readers because the text is still being displayed. The only time using text indent becomes a problem is if CSS is enabled and Images are disabled, then nothing shows, but that is probably such a small case you mightn't care.
The second problem is if you use it on a link, and in Mozilla based browsers it will produce a dotted outline on :active which will wander off off-screen. For an example click and hold the mouse on the top links (monster, skillshare) of CSSBeauty in Firefox and you'll see the effect. But it is easily solved by setting outline: none; on :hover for the link and set overflow: hidden; on the link so that the link is still outlined if someone tabs to it.
*nudges cssbeauty admin* -
Eh, I already removed it... but instead of being contained to the right hand column, the div spanned the entire content area (see white area) behind the sidebar, and was aligned to the left when I tried limiting the width.
True about IE5.
Doesn't matter though -- I seem to have something working with this method I've "created". If no one can give me a really good reason not to use it... Anyone?
Rob -
If the heading is on a right column you should try text-indent: 1000em instead of -1000 so that it pushes it to the far right. Also try overflow: hidden; on it if needed.
-
Kanashii,
How would I hide the enitre IR technique from IE5? I searched and found something for individual styles (width, etc) but not a whole one.
I feel really naive now.
Rob -
Ahhh -- just hide the background and text-indent, right?
Switching the indent didn't work, but the overflow: hidden works perfectly. Thanks! -
Cool good to hear.
About IE 5:
<!--[if IE 5]>
<style type="text/css">
h2.ir { text-indent: 0; background: none; }
</style>
<![endif]-->
Replacing h2.ir with whatever you're using for the selector, and having this block after the link to the real stylesheet so it cascades and this overwrites the other. : ) -
Found a great resource here: http://w3development.de/css/hide_css_from_browsers/
Thanks for your help, Kanashii!
Rob
1 to 10 of 10