Problem with text-indent

HTML & CSS
1

Hello all,

I was hoping to launch a site tomorrow, only I’m having an issue using the ‘text-indent:-9999px’ css hack.

I’m trying to arrange so that when you hover over the twitter bird for any given post, the darker image shows up. But for some reason the text won’t indent off the screen. Right now it’s just moving a little to the left, but part of the ‘Tweet this’ text is still visible. Anyone have any idea what might be causing this? Any ideas how to fix?

Here’s a link where you can see what’s going on: http://bit.ly/asaqB3

Thanks in advance!

2

for future reference, I have found text-indent only works with left-aligned text. If you have any other text alignment, inline or otherwise it wont work.

3

Thanks Rayzur! That did the trick.

Actually, it is a WordPress site with a custom theme. The Twitter Link is courtesy of the ‘Tweet-this’ plugin, so I was limited to changing the inline style so that it read “text-align: left” instead. But it worked!

4

Hi,
The first thing I would do is get rid of all the inline css text-align styles in your tweet this divs. Mainly because there is no reason to mix markup with presentation. Secondly because it appears to be part of the problem.

<div class="tweetthis" [COLOR=Red]style="text-align:right;"[/COLOR]>

After removing that your text-indent:-999px works for me.

If you were trying to get your tweet anchor to the right then just float it right.

I was hoping to launch a site tomorrow,
Why are you using a transitional doctype on a new site?
There is no good reason for it, use a strict doctype and keep the inline styles out of there.

^I see, it’s a WP theme. I suppose that is how the tranny DT got in there.

5

It looks like you could also fix it by setting text-align:left on the child anchor via css. That would override it from inheriting the inline text-align:right; that was set on the parent div.

I did that first with firebug and noticed that it worked, that’s what led me to remove the inline style altogether.

I was limited to changing the inline style so that it read “text-align: left” instead

Either way would work, glad you found a fix :wink: