display: none; or text-indent: -5000px; which more semantic

[faclimber]

on the site i'm currently coding the <h1> and <h2> are images. this is the designers wish and is out of my control. i've coded the headings in and have been using, text-indent: -5000px;. this works, to move text off screen, however, it adds a space between the header image and the first paragraph. how do i get rid of the space?

by using display: none; this space is not there.

is one code better to use than the other?

i can provide code if that makes it easier.

[_Aerospace_Eng_]

The space is likely coming from the margins on the h1 and h2. Set them to 0.

[Andrew Johnson]

I think you answered your own question...

display:none if you don't want the space there
text-indent:-5000px if you do

Usually I tend to make my header image in the form of an h1 tag with background-image set to the image URL and text-indent to -5000px... perhaps that would be a solution here?

[Andrew Johnson]

The space is likely coming from the margins on the h1 and h2. Set them to 0.

And header tags are block elements, not inline...

[VIPStephan]

The difference between display: none; and a negative text indent is that with display: none; the element will be hidden completely, even for some screen readers and other applications while with text-indent it will still be read which is better in terms of accessibility. Note that this has nothing to do with semantics.

So, in any way you shouldn’t be using display: none; unless you actually want nobody to see/hear that element’s content (and people using screen readers might wanna know what the site is about so think twice). To get rid of the space you can position the element absolutely somewhere off the screen (negative top and/or left position).

[faclimber]

thanks for the responses, they're greatly appreciated.

i have this code at the top of my css:
* {
margin: 0;
padding: 0;
}

does this not apply to the spacing between <h1> or <h2> and first paragraph below?

[Andrew Johnson]

It is because headers are block elements not inline

Consider changing your h1 stuff to:

CSS:

h1
{
font-size:0;
text-indent:-5000px;
background-image:url("banner.gif");
width:500px;/*image width*/
height:100px/*image height*/
}


HTML:

<h1>Website Name</h1>


It is SEO friendly and you can make it visually appealing.