SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with text-indent

    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!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <div class="tweetthis" style="text-align:right;">
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •