Transparent space-filler images

Is there a better way?

[Tokey]

Hello,
for as long as I can remember, I've been using a transparent gif called invisible.gif and specifying different widths and heights depending on how much space I want it to fill.

Sometimes Internet Explorer doesn't like it and renders it as a broken image, so I'm wondering if theres another tag I can use to do the same thing? Would DIV be able to do this?

Thanks in advance...

[jeremy goodrich]

This always seems a bad idea to me but most of the designers I work with tend to use some 'spacer.gif' images :(

Though a CSS alternative, perhaps might not be as backwards compatible as the spacer.gif method?

[Tokey]

Well I don't really care about backwards compatibility. So there is a CSS technique for this? What exactly is it?

[moltar]

Method 1:

<span style="width:15px;height:31px;"><spacer type="block" height="31" width="15"></span>

Method 2:
(still using spacer, but a little more neat)

<img src=empty.gif border=0 width=0 height=0 hspace=10
vspace=20 alt="" style="visibility:hidden">

this is 20x40 spacer. if you want 21x41, set width=1, height=1.

this method has an advantage to a "regular" spacing method, that it doesn't show images as a spacer and doesn't show placeholders when images are off.

<edit>added style="visibility:hidden"</edit>

[mivox]

Check out our CSS Forum [webmasterworld.com] for a whole lot of info about CSS positioning and browser-compatibility. :)