6 Replies Latest reply on Dec 10, 2012 10:20 PM by groove25

    How to get rid of spacer.gif?

    roblesdesigns

      Hello there,

       

      I have an assignment for class and my teacher hasn't gotten back to me yet.

       

      I created a site in fireworks (cs6) and then he says to export it. As I was building it and previewing it in a browser, I see these blank white boxes in certain areas and it's shifting things. I tried exporting thinking maybe it was just my browser and they were still there when I opened the file in DW. I think this is an issue because I'm using tables but I want to get rid of these.

       

      I tried deleting them from the code but then the entire layout went crazy. I tried aligning all the slices. I tried the different settings in the fireworks export options but it just shifts where the white squares appear.

       

      I'm really getting frustrated but don't know how to fix this. Please help!

       

      Below are three images. One with slices on. Second with preview in browser (same shows up in Dreamweaver) and finally what it's supposed to look like.

       

      Screen Shot 2012-12-06 at 4.03.43 PM.png

      Screen Shot 2012-12-06 at 4.03.58 PM.png

      Screen Shot 2012-12-06 at 4.04.13 PM.png

        • 1. Re: How to get rid of spacer.gif?
          groove25 Level 4

          Are you trying to export a table-based layout? It sounds like you are... Have a look at the export options available under File > HTML Setup. The Table options allow you to choose what methods are used for spacing or to fill empty table cells. If this doesn't help, then the General options might be worth experimenting with. In particular, try choosing another option under HTML Style (e.g., Generic XHTML or Dreamweaver HTML, instead of Dreamweaver XHTML).

           

          Table options.pngGeneral options.png

           

          The other option is to create a layout with the intent to export it as HTML & CSS. In that case, upon exporting, you'd choose "CSS and Images" (instead of "HTML and images"). However, this requires that you build the file and slice it in a particular way; I mention this just in case you're attempting to export the file in this form, instead of as a table-based layout.

          • 2. Re: How to get rid of spacer.gif?
            roblesdesigns Level 1

            Yes, it's supposed to be a table based layout. I did that "CSS and Images" thing and found that I remember a bit on how to manage the code but I believe our professor wants us to use tables for now. I also found that the rollover/image swap on the top portion of the page was gone. I definitely don't know how to code that.

             

            I tried to change the HTML setup > table > space with... area but got the same results. The white spaces shown in the above images, were still there or vanished while others appeared. I then tried to change the "HTML Style" to others but got the same results. Could there be something hidden in the file? Like in illustrator when there's sometimes a forgotten point somewhere that messes with things?

             

            I looked at my previous assignment and found that it was messier in placement of slices and also had a very similar rollover but when i exported that, it worked. The only difference is that this background image is actually larger than the canvas but it didn't change anything when I cropped it.

             

            Maybe I will try to rebuild it?

            • 3. Re: How to get rid of spacer.gif?
              groove25 Level 4

              Hopefully, you can get some one-on-one feedback from your instructor on this assignment.

               

              It looks like the text portions in the lower right of the layout have expanded in size somewhat upon rendering in the browser. This may be what's forcing certain table cells to expand to accommodate the content, causing the elements within the table to become misaligned. Text and table-based layouts just never go together well, and table-based layouts in general are not such a great idea. You might try targeting the size of this text via CSS to reduce its size.

               

              Alternatively, I would tend to look at the code in Dreamweaver, checking for sizing attributes within the table. Sometimes, these might cause a discrepancy in rendering from one browser to the next.

              • 4. Re: How to get rid of spacer.gif?
                roblesdesigns Level 1

                I hope the professor responds but I switched to exporting it with CSS. I was able to get rid of the pesky boxes but now have to figure out the rollovers/image swap that happens on the top portion. I'll try checking the internet tomorrow but do you have any ideas? Is it hard?

                • 5. Re: How to get rid of spacer.gif?
                  roblesdesigns Level 1

                  FYI: I finally recieved an email back from the professor. He said that it was the text boxes acting funky and that it'd be easier to switch the slice to "foreground image". Which I did and it worked out. Thanks for your help!

                  • 6. Re: How to get rid of spacer.gif?
                    groove25 Level 4

                    Ah, that's a good fix! I wish I'd thought to suggest it. Thanks for sharing.