SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide text image replacement question

    Hi

    I just want to make sure I am doing the right thing here.

    I am using bootstrap with a site, and as my logo is an img, I did this to keep it accessible:

    Code CSS:
    .logo H1{
    	text-indent: -999em;		
    }

    It worked fine. I found in the bootstrap less file , the new trick :

    Code CSS:
    .hide-text {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
    }
    And it worked too.

    However, with both techniques, the H1 was still part of my document 'flow' , and interrupting a nav element I was trying to place in the site. I could not figure it out, until I saw that the reason my nav item started half way up the page was thanks to this H1 I had shoot halfway up the road. It was still appearing in the flow and bumping things along.

    So I remembered from my study that setting position to absolute takes an element out of the document flow, and it worked.

    Code CSS:
    .logo H1{
    	text-indent: -999em;
            position:absolute;	
     
    }

    Question is, do I have anything to worry about here, or is it ok. What did I miss, surely this issue has something to do with my markup? It might have been the Jango in the background I don;t know. sorry, I can;t show you my site as it's hosted on an unbuntu server on my machine and I could not show you if I wanted to as it's not in prod. Cheers (I read over it hope I am making sense).
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by unconformed View Post
    I did this to keep it accessible:

    Code CSS:
    .logo H1{
    	text-indent: -999em;		
    }
    That's not accessible! Nor is the other method. What will happen if images don't load? There will be nothing there. It's incredible that techniques like these are still around when there are much better, more accessible methods that have been around for years, like these:

    http://www.pmob.co.uk/temp/headerreplacement3.htm
    http://nicolasgallagher.com/css-imag...eudo-elements/

    I'm afraid you've been misled.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!


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
  •