How to hide an element without using display: none?

[qwertyuiop]

Hi,
How can I completely hide an element without the use of display: none?

I used a combination of:

line-height: 0px
height: 0px
visibility: hidden
margin: 0px
padding: 0px
border: 0px
font-size: 0px
but the element (a span) is still present.

Here's a picture:
http://img508.imageshack.us/img508/8076/hidden5hm.png (http://imageshack.us)
the thin white bar at the top is the span that I'm trying to hide.

[_Aerospace_Eng_]

Why don't you want to use display:none?

[VIPStephan]

Why don't you wanna use display: none;? This is the correct way to hide an element completely without any placeholder. visibility: hidden; is the way of hiding with placeholder.

HA, aero.... ;)

[qwertyuiop]

Well, I've looked at some of the image replacement techniques, and they say not to use display: none.

[VIPStephan]

Yeah, you could use margin-left: -1000px; for example...

[qwertyuiop]

Yeah, you could use margin-left: -1000px; for example...Huh?

Well, here's the code I have:

<div id="header"><h1><span>site title</span><img width="800" height="100" src="images/logo2.png" alt="" /></h1></div>

[VIPStephan]

The image replacement method works differently...

Like this:

<!-- HTML -->

<div id="header">
<h1>site title</h1>
</div>

/* CSS */

#header {
width: 800px;
height: 100px;
background: url(images/logo2.png) top left no-repeat;
}
h1 {text-indent: -1000px;}


The text-indent method doesn't work on spans. But you don't need a span here as you see. Alternatively you could apply margin-left: -1000px; to the element you want to hide. This way it's moved to the left and won't be seen but is still "visible" to page readers.

[qwertyuiop]

This would work well, but I need an image element in the html because later on, I'm planning to have a random logo. I read a long time ago that random images don't work well with backgrounds in CSS.

[_Aerospace_Eng_]

Times have changed.

[VIPStephan]

Hmm, I'm not so familiar with dynamic programming languages but I could imagine you use some script to apply a "style" attribute to the div called header where you specify the background image dynamically by inserting the random string for the image path... But I could be wrong here. Just a thought...

[qwertyuiop]

Times have changed.
How so? How would I randomize a background image in CSS? php, javascript?

[VIPStephan]

I don't think you can use a script to change the CSS file but I guess you can use JavaScript or something like that to insert a style attribute to the <div id="header"> and have the script insert the string "background-image: url(images/logo1.png);" or any other logo randomly that you specified a string before...

So the Script would write for example <div id="header" style="background-image: url(images/logo1.png);">. The style attribute has a higher priority than an external stylesheet according to the W3C.

[qwertyuiop]

I'm going to do it like how this site: http://www.trisweb.com/ does it. I just checked the source, and it's close to what you described, VIP. I guess this is what I'll do. So that means I'll use the image replacement method that you explained.

Man, the steps that I had to take just for the image rotator...

Thanks for alll the help!

[rmedek]

"height: 0" doesn't work because a span is inline by default (no height other than the line-height). So make it a block level element, then hide it:


#header h1 {
line-height: 0;
}

#header span {
display: block;
height: 0;
overflow: hidden;
}


For what it's worth for the effect used on the site you linked to, I'd use this markup:


<div id="header">
<h1>My Site</h1>
<img src="/images/photo.jpg" width="765" height="150" alt="a photo of a something" />
<!-- image switcher code in here, too -->
</div>

[qwertyuiop]

That explains why it works on <div>s when I was testing it. I'll remember this for next time. Thanks.