Transparent Gif

open up Photoshop, Paintshop Pro or any other photo/image editing program that supports transparencys. Create a 1x1 pixel canvas (besure to select transparent background) then go file > save as > spacer.gif

Ummmm.... is sunil asking about a spacer.gif or a larger transparent image? I mean, transparency has a lot of other uses besides spacer.gif! (and I would argue that use of spacer.gif is unnecessary and unwise...)

Sunil, if you let us know which graphics program you're using we'll be able to give you some more specific advice.

Quote: Originally posted by Megan
...I mean, transparency has a lot of other uses besides spacer.gif! (and I would argue that use of spacer.gif is unnecessary and unwise...)

Yeah, I totally agree, the use of spacer.gif is quite rediculous.

I have never been able to understand why someone would use spacer.gif...What's the advantage? Why?!

It used to be useful back in the days of tabled layouts and NS 4.x when you needed to get a column to stay at a certain width. Certain versions of nestcape seemed to want to collapse table widths regardless of the width attributes.

Thankyou Megan, I had a feeling it would be something like that

What would you use instead of a spacer gif?

My guess would be layers. But I was under the impression that layers and CSS are somewhat inconsistant.

And what are the drawbacks of spacer gifs?

I'm actually looking for a solution for a table or cell now that I need to be a specific size and I was going to post the problem so a CSS or DHTML solution would be great.

I guess I'm getting behind again. Sigh.

If you want a table to be a specific width then do this:

Or, if its for a TD

One draw back I can think of at the moment with using a spacer.gif is that the site will look strange when you have images turned off by default (which I have in IE5).

Even before using XHTML/CSS I didn't use or need spacer.gif's that's why I was asking about them, no excuse for lazy shortcuts IMO

I think the solution is designing more fluid layouts that don't need to be forced to be a certain width. This could be done with CSS or tables. I think that designers need to let go of the idea of forcing things to look *exactly* the way they want them. We need to accept the more fluid nature of the web and design things accordingly, rather than relying on assumptions from another medium.

I also don't think that current browsers have a problem with collapsing widths so it's not an issue anymore.

About CSS, it's not really unreliable if you know how to do it right. Read Jeff Zeldman's blog for examples of layouts designed using CSS. He posts links quite often (and his site is a good example as well).

Oooh, and the first link is: http://www.alistapart.com I love that site.

Thanks for the info and the site. I've run into his site before but haven't read deeply yet.

Not to be argumentative, it's obvious you know more about web design than I do, but I'm curious about your statement:

"designers need to let go of the idea of forcing things to look *exactly* the way they want them"

Could you elaborate?

Also what I need for my project is a way to make a cell or table's height static. That, as far as I know can't be controlled by HTML or CSS, at least across all currently prevalent browsers.

Height is valid in the HTML for lower language levels, for TD and for TABLE. It is valid in CSS and works in higher levels. In both cases the contents of the table or cell will expand the table or cell if they are bigger than the allotted height, but with CSS you can set overflow to none or hidden, which effectively truncates the content. (Support, per usual, can be varied.)

To answer the first part -- why do you want/think you need a static height? As a designer, this seems to be engaging in ego-decisions, not user-oriented design. If it's a static height, and someone zooms their text, they will lose the content.

Now with CSS, the height is determined relative to the containing element, so things like 100% are really 100% of the window, not 100% of the page.

But if you want 100%, that's not static, eh?

So, what do you want to do and is it really necessary or is it some designer arrogance at work?

Quote: Originally posted by cordedpoodle
"designers need to let go of the idea of forcing things to look *exactly* the way they want them"

Could you elaborate?

I think that in the early days of web design a lot of assumptions were carried over from the print world. Designers didn't really know how to approach the new medium by itself so they related it to an older medium they were familiar with. In print, you can make things look exactly the way you want them to. You can position something a precise decision from something else, you can make your text exactly a certain font and size etc. HTML isn't that precise. So one of the things that people did to get around it is used spacer.gif's to get things positioned where they wanted them. Even non-print designers picked up on this. It was just the way things were done then.

Now, it is true that CSS has evolved far enough now that a lot of old work-around are no longer necessary. I remember having to use spacer.gif's to get a border around something! Regardless, the new web design paradaigm embrases the fluid nature of the web rather than trying to work around it. It's doing what HTML and CSS can do, rather than trying to make HTML do what print can do. It's a different way of thinking.

Just remembered another user for the spacer.gif - providing information to alternative devices via alt tags. One use for this is to use a spacer.gif as a "skip navigation" button for screen readers. Regular browsers don't see it, but people who are using those devices won't have to listen to all the navigation being read, they can skip right to the content.

As a sidenote, I had the chance to try out a screen reader for the first time last week. Are those things ever fast! I mean, they read things so fast that it's hard for a sighted person to digest what the software is reading. They say that people who have vision impairments have improved hearing, so they don't have a problem with the speed.