Announcement Announcement Module
Collapse
No announcement yet.
What is a "Spacer Image" ??? Page Title Module
Move Remove Collapse
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • What is a "Spacer Image" ???

    #1
    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


  • #2
    http://www.hms.harvard.edu/it/www/te.../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

    Art Forums | Ecsyle.Com

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

    Comment


    • #3
      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.



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

      Comment


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


        'Adventure, Excitement, A Jedi craves not these things.'
        'Anger...fear...aggression. The dark side of the Force are they.'

        Comment


        • #5
          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

          Comment


          • #6
            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.



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

            Comment


            • #7
              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

              Comment


              • #8
                Correct.



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

                Comment


                • #9
                  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.

                  Comment


                  • #10
                    Yuck. I never use spacers anymore.

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

                    Comment


                    • #11
                      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>

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

                      Comment


                      • #12
                        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.

                        Comment


                        • #13
                          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.

                          Comment


                          • #14


                            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!

                            chris<pixelmonkey>

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

                            Comment


                            • #15
                              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

                              Comment

                              Google search Google search Module
                              Collapse
                              Latest Topics Latest Topics Module
                              Collapse
                              All Creative World Network All Creative World Network Module
                              Collapse
                              WebMediaBrands
                              Mediabistro | SemanticWeb | Inside Network
                              Jobs | Education | Research | Events | News
                              Advertise | Terms of Use | Privacy Policy
                              Copyright WebMediaBrands Inc. All rights reserved.
                              Working...
                              X