I’ve noticed this on every instance of my “text-indent -9999px;” for image links… when you click on it, there’s a dotted line that goes around the image, all the way across to the end of the page. i’ve seen other examples of people using text-indent and this doesn’t happen… what’s the secret?
here’s an image of what i mean:
http://desmond.yfrog.com/Himg175/scaled.php?tn=0&server=175&filename=textindent.jpg
please help. It’s causing me strife 
Your jpg doesn’t open in my browser (Opera). Without knowing more, I’d guess it may be a border cascading down from somewhere earlier in the stylesheet. The outline: none; bit might work, also, though that’s an accessibility feature that shouldn’t be turned off unless necessary.
Is this only in FF?
Try styling the page element with:
outline:none;
Black max has it right, though given that text-indent for image links doesn’t give you images off graceful degradation likely making your page have accessibility issues, you may want to look into a more robust image replacement technique like gilder-levin.
Though again, no code, no link === wild guesses && no real help for you.
No soup for you. 
Good question, pas_non, I’d like to know, too. 
You are light-years ahead of where I was after my first six months. Of course, that was before CSS had been widely developed, and I was using tables and spacer gifs :x God knows I’m not an expert, but most of what I do know came from working with people on these forums who were patient and willing to give me a hand when I came in with “stupid” “n00b” questions. I’m glad you seem to have made the choice to stick with it here.
edit: cross-posting with Poes, 
You say the text is there if the image isn’t… in my experience, a negative text indent means I see absolutely nothing (all I get is a mystery meat menu… my mouse turns into a hand when I hover over the blank area, and then I need to see my bottom bar to know where it goes to).
This is already getting old, but as I still haven’t moved it… http://stommepoes.nl/Kyle/practice.html
Though a bit more recently (a year ago?) I did this also for someone: http://stommepoes.nl/Tests/lilbellas2.html (turn images off in your browser… that’s what I like to see in a menu)
The designs and images are from other people on forums. Anyway they show you some of what you can do. You can have three states on your sprite too if you want.
I actually first learned to do this from Deathshadow (on another forum) because he had posted a whole recode… I still remember, this guy PixelCommander had this really neat-looking graphical page (but with bad code) for like a band or band agent or record label or something… so all the text needed to look really funky but also have a hover state…
ah yes I forget: the other reason I’ll use Gilder-Levin is to have the hover/focus state with the image. It can be done with pure images but it doesn’t degrade as nicely. Anyway I had to just copy the code for a while before I understood how it worked and then I could just write my own.
Eric Watson has some example using z-index on his site somewhere as well. He pushes the text under the image with a negative z-index or something.
In general, nothing. I use Gilder-Levin when I want to style the “alt text”
ok. that’s interesting to know.
can i ask your opinion on what is the final, “right” way to make an image-based menu? right now i’m using a single sprite and text indent. if i get rid of the text indent and try to use the glider levin, would i still be able to use a sprite? the “right” way seems to change so quickly, and there’s so many ways both old and new (the main reason it’s a HUGE pet peeve of mine when online tutorials posts are not dated!) - how should i approach an ul horizontal nav made of images, and still preserve accessibility?
with sprites, you can’t use an alt tag because the image is on the background, so i really liked text indent :(.
i like using backgrounds for images because on my phone which does not use style sheets or images, the broken image box isn’t there. i hate the broken image box. it makes the non-image/css browser experience very annoying. but with text-indent: the text is there, i can click on it, it works perfectly. perhaps i am an atypical phone user; but i tend to think that the mistakes i make are commonly made, and the things that annoy me also annoy other people. i hadn’t thought about css but no images - in what situation would a browser typically have that setting?
but i am curious because that link sais it does not work behind an image with transparency. i have a situation with a current site that involves a transparent png that i’d like to use image replacement on. if there is text behind that png, it will definitely show. what do you recommend for that situation?
I’d have to see the actual situation. As much as I can, I’ll fake it (most of the time I start out with transparency, I can sit and think about it for a bit and get rid of the transparency… which is good for a) IE6 and b) smaller filesizes).
and, just out of curiosity, what’s wrong with just relying on an alt tag rather than all this to work out image replacement?
note: alt attribute
In general, nothing. I use Gilder-Levin when I want to style the “alt text” (which you can do for FireFox anyways but other browsers don’t). I often want my page to still have styles even if the user doesn’t receive images.
thanks. i spend a lot of time trying to figure out the best way to do everything, and it’s a lot to learn at once. it will probably take me a while to figure it out completely, while staying on top of coding trends which often change before i even get to them.
The Gilder-Levin technique is pretty awesome, and quit every instance of neg text-indent as soon as I figured out how it worked.
thanks for that link. i’d like to use it also, but i am curious because that link sais it does not work behind an image with transparency. i have a situation with a current site that involves a transparent png that i’d like to use image replacement on. if there is text behind that png, it will definitely show. what do you recommend for that situation?
and, just out of curiosity, what’s wrong with just relying on an alt tag rather than all this to work out image replacement?
Most of us never got anything cool like real education or internships… forums are one good place to learn, they’re where I learned at least 50% of what I know and the internet can keep up with cutting-edge better than a school or a textbook can.
i go to all the local meetups and conventions i can, and try to read everything i can online. there’s just so much. i started about 6 mos ago and have progressed very much from where i started, considering my job also involves a great deal of print and web design in addition to actually coding out the sites. it will come eventually.
thanks for the friendly words everyone!
the link does not seem to be working for me wither pas non.
One think i could quickly suggest before i have to go is that for something to change in on Click in CSS then it means that whatever you wanted to stay the same is not styled the same in both normal conditions and on Click conditions. I hope i helped a little I wish i could think about this some more, but i have to go for now.
unfortunately, almost everything i know regarding html and css is self taught and i’d love to have had an internship where everyone was on the cutting edge of every code trend and had the time to sit down with me and teach it. but it didn’t happen that way. so i look online for help. obviously this isn’t the place for people at my level. thank you anyway.
Deathshadow may not be for all levels, but SitePoint is. Mostly, we care that you CARE about your site because it means you care about your profession (even if it’s not a profession for you yet) and because it means you care about your visitors… who may well have a different screen width than your mobile and no images. I agree entirely with DS that negative text-indent is a terrible thing because so long as your user agent (browser) supports SOME css, the text is GONE and the image may not appear. I’ve spent time surfing with images off and found that the negative text indent thing was just too widespread to continue (turning CSS off entirely of course fixed it).
The Gilder-Levin technique is pretty awesome, and quit every instance of neg text-indent as soon as I figured out how it worked.
I keep this page bookmarked because, even though it’s old, is very cool for showing pros and cons of image replacement techniques:
http://www.mezzoblue.com/tests/revised-image-replacement/
It’s missing a newer? technique using z-index but is still a nice overview.
Most of us never got anything cool like real education or internships… forums are one good place to learn, they’re where I learned at least 50% of what I know and the internet can keep up with cutting-edge better than a school or a textbook can.
I’m gonna jump in here to reinforce what Ray has said.
Please do not assume that this treatment is the norm here - it’s not ok - but from the looks of your retort post – which I love – you can handle yourself just fine.
Hi pas_non,
SitePoint welcomes people at all levels of experience so don’t think that you are not welcome here.
actually it’s she
i think it may have to do with my firefox version? i’m on 3.6.4 on my mac and not sure what i have on the pc at work, it could be an earlier version.
here’s what i found on the subject, from sitepoint no less:
http://reference.sitepoint.com/css/text-indent
unfortunately, almost everything i know regarding html and css is self taught and i’d love to have had an internship where everyone was on the cutting edge of every code trend and had the time to sit down with me and teach it. but it didn’t happen that way. so i look online for help. obviously this isn’t the place for people at my level. thank you anyway.
WOW! ok! thanks for all the helpful tips and the excellent attitude. i’m an intern, but when i get to the level of awesomeness you’ve obviously reached, i’ll be sure to treat people like a**holes. i was not aware it came with the territory like that. GOOD TO KNOW.
so, A+ for condescending attitude and sorry, :sniff: at the time i was not aware of le “Glider-levin” technique.
the website works better than most of the mobile websites i’ve visited on my palm centro. it’s text only. no style sheets, no images. i wish many more websites worked as well as that one.
the “text_tan” classes that are making your blood boil so? they’re for the wysiwyg. so the writer can make their text a different color. if that’s ok with you. which it’s probably not. just add that to your list and slide it under my door, i’ll take a look at it in the morning.
anyway, i figured out the text indent issue. it’s firefox-specific. overflow:hidden fixes it. thanks for your help anyway! i’m glad to have set the stage for your brilliant show of arrogance.
ps, am quoting your entire dumptruck comment so you can feel the same delicious tingle of self-satisfaction you got when you composed it the first time round. feel free to print it out and tape it above your bed. :daisy:
DS, he’s got a point. You and I are crusty old louts who sit on the front porch, spit into tobacco cans, and yell at everyone who walks on our grass. After we went out back and beat each other bloody one good time, we’d get along great. But everyone isn’t like that. And, everyone doesn’t have the high level of code/design knowledge you have. I believe he really does care about his “broken site,” and wants to get it running as best he possibly can. (He also gets points for designing a site for an equine clinic. :tup: ) Your definition of “polite” isn’t shared by everyone. If you can’t tone it down a bit, then at least don’t be surprised when you get that kind of reaction.
Pas_non, I’m glad you fixed it, but I still don’t understand why I didn’t see it on my copy (newly updated) of FF.
I don’t see it in Firefox either.
is that supposed to be a mobile design? You realize that like 70%+ of mobile browsers out there don’t even SHOW background images, or even obey text-align and float? Have you looked at it with images off or in Opera Mini? You might try testing on mobile or at least emulators before calling it a mobile page.
Got enough div and classes in there? Easily two thirds of your markup should be on the cutting room floor.
Not all handhelds are 320 wide, you’ve fallen back into the trap of fixed width layouts.
Comment placement likely to trip IE rendering bugs… much less if you used MEANINGFUL classes half your comments would be pointless.
For example:
<!--footer -->
<div id="footer"
that’s a “No ****, REALLY?”
Presentational classes – “text-tan” and “text-brown” doesn’t say WHAT it is – at that point you might as well go back to using HTML 3.2
Outdated attributes like ALIGN - get rid of them.
No media types - of course if the home page bothered with semantic markup and media types on the CSS, you probably wouldn’t be designing a mobile specific version in the first place.
I don’t see any elements that are (or should) be using text-indent in the first place – Well, excepting maybe that really badly planned ‘contact’ button.
Basically your problems run a LOT deeper than text-indent stretching out the outline property. 4.6k of markup to deliver 270 bytes of content with images almost entirely being in the CSS as backgrounds is a sure sign of an overcomplicated non-semantic mess.
There is no legitimate reason for that page to be a whole lot more markup than:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="keywords"
content="equine, clinic, hospital, horse, veterinary"
/>
<meta
name="description"
content="A leading horse clinic and hospital providing care for equines throughout Wisconsin and the Midwest"
/>
<link
rel="shortcut icon"
href="/favicon.ico"
type="image/x-icon"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
type="text/css"
rel="stylesheet"
href="handheld.css"
media="handheld"
/>
<title>
Welcome to Wisconsin Equine Clinic & Hospital - Oconomowoc, WI
</title>
</head><body>
<div id="pageWrapper">
<h1>
Wisconsin Equine<br />
<small>Clinic & Hospital</small>
<span>Mobile</span>
<b><b><!-- image replacement --></b></b>
</h1>
<a href="contact.php" id="topContact">
Contact
<span><!-- image replacement --></span>
</a>
<ul id="mainMenu">
<li class="first"><a href="about.php">About Us</a></li>
<li><a href="veterinarians.php">Veterinarians</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="resources.php">Resource Library</a></li>
<li class="last"><a href="directions.php">Map & Directions</a></li>
</ul>
<div id="contactColumn">
<h2>Call Us for More Information!</h2>
<a href="tel:262-569-1550">Local: 262-569-1550</a><br />
<a href="tel:1-800-564-1550">Toll Free: 1-800-564-1550</a>
<!-- #contactColumn --></div>
<div id="footer">
Wisconsin Equine Clinic & Hospital<br />
39151 Delafield Road | Oconomowoc, WI
<div id="socialLinks">
<a href="http://www.facebook.com/home.php?#!/pages/Oconomowoc-WI/Wisconsin-Equine-Clinic-Hospital/220128931006">
<img src="images/facebook.png" width="34" height="35" alt="home"/>
</a>
<!-- #socialLinks --></div>
<div id="localLinks">
<a href="http://www.wisconsinequineclinic.com/">View Full Site</a>
<!-- #localLinks --></div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Which is about half the markup even if you put that google analytics nonsense back in. (Not a fan of wasting javascript and access to some other server for information I should already have on my server via the access logs and easily formatted by software like analog or webalizer)
Though really, if your problem for this thread is text-indent, don’t use text indent and as I suggested use a more advanced/proper technique like Gilder-levin. Negative text indents are a miserable accessibility /FAIL/ in the first place, and as such should NOT be used - ESPECIALLY on a mobile site where text-indent among many other CSS properties like background-image or negative margins will be outright ignored.
thanks for your responses. and i apologise for not including an example… i guess i assumed this was a known and easily fixable thing - but here’s a link to a mobile site i did, when you click on the “contact” button at the top - it has a text-indent on it for non-graphics/css phones (like mine haha) but when you click it, the dotted lines seem to trace the entire area of the button right off the left side of the page, where it’s indented.
http://www.wisconsinequineclinic.com/m/
and to answer the browser question - i just tried it in other browsers, and apparently it only does this in firefox. is there a firefox-specific solution for this?
i’ve seen this on occasion on other sites using text indent, but the majority i’ve seen do not have this problem. any ideas on what i’m doing wrong?
CHRISTMAS ON A CRACKER - that’s about as polite as I get… WHAT THE HELL! Are people REALLY this thin skinned out there!?! If that was your idea of offensive I’d hate to see what would happen had I REALLY posted the full version.
All I did was list what’s wrong with the page - so apparently you don’t care about what’s wrong and really don’t want to fix anything or learn how to do things better.
WHATEVER. Have fun with your broken site.