Using "Null" graphics as "spacers" in IE and Netscape

Forum Moderators: open

Message Too Old, No Replies

Using "Null" graphics as "spacers" in IE and Netscape

shoreman

11:08 am on Feb 8, 2002 (gmt 0)

When creating tables I like to use a NULL graphic, 1x1, transparent as a spacer.

I change the size of the graphic depending on how big or small I want the space to be.

i.e.
<IMG SRCshim.gif WIDTH=1 HEIGHT=1 ALT=''>
OR
<IMG SRCshim.gif WIDTH=10 HEIGHT=25 ALT=''>

This works fine in IE but for Netscape it always shrinks the graphic down to 1x1 .... how do I make it work in Netscape?

joshie76

1:46 pm on Feb 8, 2002 (gmt 0)

Hi shoreman, welcome to WmW

Your HTML for the image tags looks a little out there, try:

where x and y are the sizes you want.

Josh

andron

2:13 pm on Feb 8, 2002 (gmt 0)

In addition to what Josh says you may want to add / to the end to make it xhtml complient.

where x and y are the sizes you want.

-Andron

shoreman

3:08 pm on Feb 8, 2002 (gmt 0)

josie76, the original post has a cut&paste error, the original code does indeed have src="shim.gif"

Andron, IMG tags should not end /> take a look at the tags on this page and you will see they end >

TallTroll

3:18 pm on Feb 8, 2002 (gmt 0)

Shoreman, andron is perfectly correct. In the XHTML, or HTML 4.0 (strict) specs, ALL elements sould be closed (/>). Placeholder-type tags such as <img> and <br> are permitted to open and close within the same tag, ie <img.... />, <br />.

Check the DTD for this page : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This page is written to the HTML 4.01 transitional standard, which does not require closing every tag

joshie76

4:28 pm on Feb 8, 2002 (gmt 0)

hmm, it's always worked for me. Are you 100% sure that you've got your SRC url correct and it's not something like "images/shim.gif"?

If not StickyMail* me a URL and I'll have a look for you.

*StickyMail can be accessed at the top of the screen

bufferzone

7:16 pm on Feb 8, 2002 (gmt 0)

Hi shoreman

Be adviced that these 1 pixel graphics will get you in truble with some of the searchengines, use with care

tedster

7:54 pm on Feb 8, 2002 (gmt 0)

To be precise, you can get in trouble using 1x1 gifs to hide links, or keyword stuffing the alt attributes. Merely using them as a true spacer is extremely widespread - no problems.

If you're at all concerned, make the original graphic 10x15 and redraw with the browser.

shoreman

10:30 am on Feb 9, 2002 (gmt 0)

OK Guys, thanks for all your comments.

The problem is caused by NOT using quotes around the height and width numbers, i.e. HEIGHT=10 WIDTH=20 works for IE, but does not for Netscape, it must be HEIGHT="10" WIDTH="20"

bufferzone

7:34 pm on Feb 9, 2002 (gmt 0)

<tedster> Thanks for that comment, I was under the impression, that the existence of a 1 px graphic in a webpage was enough.

Thanks
Kim

tedster

8:39 pm on Feb 9, 2002 (gmt 0)

Yeah, people often speak in shorthand -- saying 1x1 gif when they really mean 1x1 gif SPAMMING. There are other areas like that in SEO as well. Gotta read between the lines very closely sometimes.

This thread was a very good place for your comment, so those who might be tempted understand the risks involved -- and also a good place to clear up the possible misunderstandings.

(edited by: tedster at 8:51 pm (utc) on Feb. 9, 2002)

bufferzone

8:49 pm on Feb 9, 2002 (gmt 0)

>Gotta read between the lines very closely sometimes>

And that is not always easy when english is not your first language, and you are right wmw is quit a university when it comes to SEO

Robert Charlton

1:58 am on Feb 10, 2002 (gmt 0)

I think it would be better, once you've decided on the size you want for your shim, to create a shim that is actually that size. If you use your height and width attributes to adjust the size, you're causing users' browsers to work harder, and that can slow page loading. It may not be much of a slowdown for one shim; but if you have a bunch of them on a page, I think it could be a factor in loading speed.

ggrot

9:00 pm on Feb 10, 2002 (gmt 0)

Robert, I disagree. A browser wont have much difficulty resampling a 1x1 pixel image, since it has only 1 color. However, having 30 different images of larger file sizes will prompt the browser to download more of them, thus slowing page loading via bandwidth bottlenecks on slow phone modems.

tedster

9:51 pm on Feb 10, 2002 (gmt 0)

My experience is the same as ggrot's. I have one site with some pages that use many different size indents.

At present I use 40 or 50 redrawings of the same spacer gif, and the layouts render almost instantly -- quicker (and easier to maintain) than the table cells I used before, and much quicker than custom-sized graphics that each require their own download.

Similarly, I use single color gifs in the color palette of the site, and redraw them with the browser for "trim" at various places.

IanKelley

10:08 pm on Feb 10, 2002 (gmt 0)

I agree... Browsers (infortunately) don't do much in the way of resampling... they just shrink or contract pixels... no anti-aliasing of any kind so it happens quickly on even the slowest computers.

Robert Charlton

7:00 am on Feb 11, 2002 (gmt 0)

>>A browser wont have much difficulty resampling a 1x1 pixel image, since it has only 1 color<<

Good to know. That makes life quite a lot easier... Thanks.

Eric_Jarvis

2:32 pm on Feb 11, 2002 (gmt 0)

I don't have that much use for spacer gifs now that I'm mostly using css for layout...but when I do, I always use a transparent 1x1 gif...saves making loads of them