What is a "Spacer Image" ???

[Silence04]

when i save an optimized version out from imageready for web it always put these 1 pixel tall 'spacer.gif' images at the bottom of the table...
and when i try to delete those 'spacer' cells, it messes up my whole tabel...
can someone explain to me what the heck these things are for and why they mess up the layout when taken out???

Taylor

http://www.jdcgraphics.net/banner.gif

[ecsyle]

http://www.hms.harvard.edu/it/www/templates/cleardot.html

The internet said...
Setting the HEIGHT and WIDTH equal to '1' while adding the necessary HSPACE and VSPACE equivalents will allow you to stretch and enlarge the transparent gif in such a way that it 'pushes' text or images and keeps them in place. Or you may change the HEIGHT and WIDTH attributes to stretch the spacer gif, remember to include the HSPACE='1' VSPACE='1' attributes as well. Including all of these attributes will ensure that your page is viewable on both Netscape and Internet Explorer browsers

And this was from the ImageReady help file-
ImageReadys help file said...
...Adding spacer cells is necessary with table layouts in which slice boundaries do not align, to prevent the table from breaking apart in some browsers

http://www.ecsyle.com/pictures/forum/3.jpg
Art Forums (http://www.artformsdesign.com) | Ecsyle.Com (http://www.ecsyle.com)

Post Edited (ecsyle) : 4/7/2004 9:52:08 PM GMT

[Ryan8720]

They are just a part of the crappy code that gets put out by ImageReady. They are an easy way to put in needed content and add a table cell.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Yea I would just recreate the table with out that crap. Or use CSS.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Fusiondesigner]

Its because it doesnt use nested tables I think. Some layouts will be complex. Im not sure how they hold the whole thing together, but I know it puts in too many tds. Your right when you delete them all the spacer gifs the design falls apart, whys that happen? What about complex layouts, seems hard to hand code them. Would you try nesting tables?

Certified in May!
http://www.fusioneffect.com

[Ryan8720]

DW puts in a bunch of extra table cells and uses the invisible spacer gifs to hold the amount of room that is left over. When you take the gifs out the space collapses and you have a mess.

It's not hard to hand code. Personally I don't recommend using tables at all. It is best to use CSS.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Fusiondesigner]

They don't always display right yet though do they? Html was never really designed for anything other than documents.

Certified in May!
http://www.fusioneffect.com

[Ryan8720]

Correct.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[YellowDart]

Yea, it's best to hand code your layouts. IR inputs these spacer.gif's inside table data fields (<td>) to keep lock the table's dimensions. So for example, if you have a table that uses 7 collumns, IR will make 7 collumns of spacer cells. Each spacer.gif instance w/in the HTML code will have the specified width of the field. It's basically there to help design/HTML newbs code their sites through apps like DreamWeaver or FrontPage GUI's. At least that way, the table's size won't deviate inside DW/FP from what they/you have already laid out in IR, even if there's no content in any given cell that utilizes these spacer cells.

The reason your layout gets all screwy if you delete one or all of these cells is because the entire table's layout is based off of those cells. Each row and cell within the table bases it's dimension in width off of the width of those spacers. The only way to get rid of that effect is to go through your layout, and change the colspan/rowspan attributes of every single <td> in your code. It's a huge headache.

The best way to get around this is to code from scratch. It's a bit of a P.I.T.A. @ first, but once you learn it, you'll never go back. ;)

[Benjamin]

Yuck. I never use spacers anymore.

http://www.jackfruitdesign.com/
Om Namah Shivaya

[pixelmonkey]

here is a great way to get around those yuckey spacer images....

http://www.sitepoint.com/article/tables-vs-css

great reasoning to be using style sheets when possible, but it does require some
more time when doing a mostly image based layout.

works great when you want to reformat an entire site!
chris<pixelmonkey>http://www.graphicdesignforum.com/emoticons/icon_biggrin.gif

the monkey makes all the girls bounce!
*i'm an aerobics instructor too*

[YellowDart]

Good read... definitely worthy of looking into. I doubt I'd use it much in my office though... my bosses are pretty set on using HTML 4.0 in our coding for 'compatibility's sake.' Most of us would all have to relearn how to code in CSS as well... but I'd do it just to learn a quicker easier way to code and update sites. Changing a few div tags is a lot nicer imo, than completely restructuring an entire site, just to throw an extra menu item in or something like that.

Thanks for sharing pixelmonkey. ;)

Yea CSS is very flexible.

There are little gliches to overcome when laying out pages in CSS but Axoi and Ryan are a great help and can get you guys through most of the mess.

[pixelmonkey]

YellowDart said...
Good read... definitely worthy of looking into. I doubt I'd use it much in my office though... my bosses are pretty set on using HTML 4.0 in our coding for "compatibility's sake." Most of us would all have to relearn how to code in CSS as well... but I'd do it just to learn a quicker easier way to code and update sites. Changing a few div tags is a lot nicer imo, than completely restructuring an entire site, just to throw an extra menu item in or something like that.

Thanks for sharing pixelmonkey. ;)you're welcome for the link.

that one was going around our developers group the day after it was posted on the net. i book marked it for occasions like this. ;)

i know what you mean about the html 4.0 standard, as our intranetpeople are with that standard. *my thoughts of them arent verry high, as they are still goo-gaa-eyed at animated *.gif images. i hope they never learn enough to become dangerous! :eek:

chris<pixelmonkey>:D

the monkey makes all the girls bounce!
*i'm an aerobics instructor too*

[Fusiondesigner]

Make sure all your slices are nice and logical; slicing is a huge part. If you just randomly slice, then itll be very hard to put back together or IR will slap loads of spacers in.

http://fusioneffect.com

web::identity::design