Using <img scr=spacer.gif for space separator too heavy

[emmanuel szabados]

I learned to use the width & height with a <img src=spacer.gif...
little fake image to display spaces that
all browser can support for a standard format display. Meaning that  
or <td width=5></td> do not work for all browser. Is there an other way to create "spaces" which would work for all Browser ??

Thks

[toolman]

Actually I think the transparent pixel is the best answer for this situation right now.

Css will eventually replace this but as of yet the absolute in absolute positioning still isnt so absolute cross browser wise.

[mivox]

Actually, I've found absolute spacing in CSS very reliable... as long as you (practically) rebuild the entire site to work with your CSS positioning. There are a lot of VERY mysterious and surprising conflicts between HTML 4, CSS and today's browsers (Netscape in particular).

If you're willing to spend the time to completely rebuild your entire site, you can make CSS positioning work on all major version 4+ browsers... but if you'd like to keep the rest of your site "as is," you're better off sticking with your spacer.gif.

[knighty]

Ive never used spacer gifs other than to set a 1px vertical or horizontal line.

setting the TD attribute will work fine as long as the sum of all the widths add up to the table size.

[theperlyking]

I have used and do use spacer gifs sometimes but like knighty I do think that setting cell widths/heights also works. The problem is if your table structure has any problems then the spacing might not work with no obvious reason (i'm thinking of netscape :)).

[knighty]

Just setting the height and width of cells should work fine but it is tricky as one cell can screw up how it looks.

IE is very forgiving but Netscape will give headaches.

Its more a personal thing with me as I get sick of seeing sites using about 50 transparent GIFs to set up a simple table.

Most problems can easily be avoided with a little pre thought and effort though rather than letting a prog like fireworks "help" you. (not that i hate firworks, in fact I love it....just not for creating tables)

[AreebaGuy]

ok. you've pressed my buttons. If there is one thing I can't stand it is overuse of spacer.gif. They create unnecessary hits, they require alt text, they show up from tabbing. They are slow, messy and ugly. They bug me ok!

So what is a nice backwards compatible alternative? Style and the Netscape redundant spacer tag. You have to use the type=block and include both height and width. Here are 3 examples

<td style="width:10px;"><spacer type="block" height="1" width="10"></td>

<span style="width=10px;"><spacer type="block" height="1" width="10"></span>

<td style="height:20px;width:20px;">;"><spacer type="block" height="20" width="20"></td>

It's clean and works IE3+, Netscape 4+.
So, please, please, please stop using spacer.gif.

[pageoneresults]

AreebaGuy, you've definitely sparked an interest with me on this one. I just went through the home page of the site in my profile and replaced the main spacer gifs with your 3rd example. Thank you so very much for posting this info.

Now, can you explain the difference between the three formats of the tag? Is there a benefit of using one over the other?

What would the tags look like if there were rowspan and colspan attributes?

[AreebaGuy]

There's probably only two examples really. Once for use in tables and one for use in normal paragraphs, and I put a typo in the last example anyway.

Essentially the spacer is the same as spacer.gif when used in Netscape. Provided your table cells have the same height and width as the spacer then they will be identical across browsers, regardless of colspans and rowspans. Given that IE uses style sheets back to version three I've used style references rather than <td height=20 width=20> but that works just as well.

[pageoneresults]

Could you provide an example of your css reference? I'd greatly appreciate it!

[pageoneresults]

Hmmm, one of the things I've been working towards is validating 100% at the W3C. Its an ego thing. Anyway, I was two warnings away from 100% validation and it has to do with the NS4 margin attributes.

After changing the spacer.gif tags to the above method, I now get these errors. Help?

... th:151px;height:1px;"><spacer type="block" width="151" heigh ...
^Error: there is no attribute "TYPE" for this element (in this HTML version)

Line 18, column 35:
... t:1px;"><spacer type="block" width="151" height="1"></td>
^Error: there is no attribute "WIDTH" for this element (in this HTML version)

Line 18, column 50:
... ght:1px;"><spacer type="block" width="151" height="1"></td>
^Error: there is no attribute "HEIGHT" for this element (in this HTML version)

Line 18, column 50:
... :1px;"><spacer type="block" width="151" height="1"></td>
^Error: element "SPACER" not defined in this HTML version

Line 18, column 50:
... "><spacer type="block" width="151" height="1"></td>
^Error: end tag for "SPACER" omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed.

[AreebaGuy]

XHTML and Netscape 4 simply don't live in the same universe. You either develop to HTML 4.0 and include Netscape 4 in your support or leave out the spacer tag and be XHTML compliant. You could close of the spacer tag
<spacer type="block" height="20" width="20"/> to be technically correct but otherwise you just have to accept that it is a backwards compatible thing and doesn't do any harm. Netscape 6 doesn't require it but then most Netscape users are still Netscape 4 anyway. Besides a spacer.gif image that only has the use of taking up screen real estate is surely more a blemish on pure XHTML than a tag that simply doesn't get rendered?

[AreebaGuy]

I get the same XHTML errors in the validator as you do, Netscape margins and spacer tags. I don't bother with any style references for the spacer although I suppose you could. I put the style for IE/Netscape 6 in the surrounding <td> tag.

so the complete example (with colspan)

<td colspan="2" style="height:20px;width:20px;"><spacer type="block" height="20" width="20"/></td> 

[pageoneresults]

I reverted back to the spacer.gifs for now. We are using Adobe Go Live for the slicing and dicing and there are options for the tags. I'm going to have my designer run a few tests to see what each option produces in the form of code. Some of this is beyond my level of knowledge.

Its people like you that keep me awake all night! :)