Hide text image replacement question

HTML & CSS
1

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:

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

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

.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.

.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).

2

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

I’m afraid you’ve been misled. :frowning:

3

cheers