10 Replies Latest reply on Jun 8, 2009 5:11 PM by systemFX

    fireworks sliced graphics appear cracked in FIREFOX

    systemFX

      Hi all,

       

      Just wondering if anyone out there knows the solution to this problem. I have a sliced graphic on my site. It looks great in IE, but in the latest firefox browser version, the graphics appear cracked with gaps in between various parts.

       

      Anyone know a way to solve this....and no, NOT USING FIREFOX, is not a solution....

       

      I am using FIREWORKS MX 2004 for this, and never had this problem before. Still looks great and works great in all Versions of IE.

       

      HELP!

       

      cheers!

       

      systemFX

        • 1. Re: fireworks sliced graphics appear cracked in FIREFOX
          boldfysh

          try adding this to your CSS:

          /* Remove border around linked images and fix Firefox odd spaces */
          img {border: 0; vertical-align: bottom;}

          bear in mind it will not be Fireworks that has caused the problem but the HTML and CSS that you're using to lay out the images.

          Firefox is most likely rendering your code correctly, so your code is most likely at fault.

          • 2. Re: fireworks sliced graphics appear cracked in FIREFOX
            Linda Nicholls Level 4

            Have you perhaps added text to a table the images sit in and caused the table cells to stretch out?  If yu are using tables, are the cells stacked like the squares on a chess board, neatly lined up one over the other, instead of staggered in brick fashion? If the latter is the case, you'll need to use the spacer or nested tables option to prevent the table from breaking up.

            • 3. Re: fireworks sliced graphics appear cracked in FIREFOX
              Jim_Babbage Level 4

              Actually, not using Fireworks to generate your HTML is the answer. 

              Design in Fireworks, buildin Dreamweaver.

               

              Jim Babbage

              NewMedia Services

              http://www.newmediaservices.ca

              Community MX Partner -

              http://www.communitymx.com/author.cfm?cid=1036

              Adobe Community Expert

              http://www.adobe.com/communities/experts/members/206.html

              Author - Lynda.com

              http://movielibrary.lynda.com/authors/author/?aid=188

              Author: Peachpit Press

              http://www.peachpit.com/store/product.aspx?isbn=0321562879

              • 4. Re: fireworks sliced graphics appear cracked in FIREFOX
                no nicknames left

                I'm Down with Jim. Dont use FW to generate code..Laarn it...its dead simple to learn.

                 

                Space below inages is cause by firefox rendering images as inline elements and the gap below is for the decender og the text.

                 

                this can be fixed but making all you images dsplay as block with css

                 

                img{

                     display:block;
                     border:none;

                }

                 

                it also may help to have something like:

                 

                img, a img{

                     display:block;
                      border:none;

                }

                 

                Maak Bow

                • 5. Re: fireworks sliced graphics appear cracked in FIREFOX
                  systemFX Level 1

                  Ok Thankyou for your posts , all of you. I appreciate the input.

                   

                  However, I never used CSS in this project. I used straight hard coded html code, and imported it directly from FW MX 2004.

                   

                  However, I am realizing that this was in error now.

                   

                  But, I am going to post some code from the FW MX 2004 code that was generated from my sliced graphic.

                   

                   

                  here it is:

                   

                  ======================== slice code =================================================

                   

                  <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
                  <!-- fwtable fwsrc="unipanelversion2fFIN.png" fwbase="unipanelversion2fFIN.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
                    <tr>
                     <td><img src="images/spacer.gif" width="15" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="13" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="6" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="26" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="33" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="5" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="66" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="18" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="16" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="89" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="55" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="110" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="30" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="30" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="22" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="14" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="15" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="11" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="14" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
                    </tr>

                    <tr>
                     <td colspan="22"><img name="unipanelversion2fFIN_r1_c1" src="images/unipanelversion2fFIN_r1_c1.gif" width="620" height="28" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="1" height="28" border="0" alt=""></td>
                    </tr>
                    <tr>
                     <td colspan="6"><img name="unipanelversion2fFIN_r2_c1" src="images/unipanelversion2fFIN_r2_c1.gif" width="101" height="61" border="0" alt=""></td>
                     <td colspan="7"><img name="unipanelversion2fFIN_r2_c7" src="images/bcnightouttitle.gif" width="261" height="61" border="0" alt=""></td>
                     <td colspan="2"><img name="unipanelversion2fFIN_r2_c14" src="images/unipanelversion2fFIN_r2_c14.gif" width="140" height="61" border="0" alt=""></td>
                     <td colspan="3"><img name="unipanelversion2fFIN_r2_c16" src="images/bcani3.gif" width="66" height="61" border="0" alt=""></td>
                     <td colspan="4"><img name="unipanelversion2fFIN_r2_c19" src="images/unipanelversion2fFIN_r2_c19.gif" width="52" height="61" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="1" height="61" border="0" alt=""></td>
                    </tr>
                    <tr>
                     <td colspan="22"><img name="unipanelversion2fFIN_r3_c1" src="images/unipanelversion2fFIN_r3_c1.gif" width="620" height="29" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="1" height="29" border="0" alt=""></td>
                    </tr>
                    <tr>
                     <td colspan="7"><img name="unipanelversion2fFIN_r4_c1" src="images/unipanelversion2fFIN_r4_c1.gif" width="106" height="10" border="0" alt=""></td>
                     <td colspan="7"><img name="unipanelversion2fFIN_r4_c8" src="images/unipanelversion2fFIN_r4_c8.gif" width="366" height="10" border="0" alt=""></td>
                     <td colspan="2"><img name="unipanelversion2fFIN_r4_c15" src="images/unipanelversion2fFIN_r4_c15.gif" width="60" height="10" border="0" alt=""></td>
                     <td colspan="6"><img name="unipanelversion2fFIN_r4_c17" src="images/unipanelversion2fFIN_r4_c17.gif" width="88" height="10" border="0" alt=""></td>
                     <td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
                    </tr>

                   

                  ================================ end of code ===============================================

                   

                   

                  Now this is just a sample snippet of the code generated by FW MX 2004

                   

                  Can any of you show me code that uses the above code as the base , and then make an examplel to show me? I am familiar with CSS, but I am do not have a clue where to start converting this from FW code to CSS.

                   

                  Any examples or LINKS will be appreciated.

                   

                  Thanks again everyone!

                  • 6. Re: fireworks sliced graphics appear cracked in FIREFOX
                    pixlor Level 4

                    systemFX wrote:

                     

                    ...

                     

                    Can any of you show me code that uses the above code as the base , and then make an examplel to show me? I am familiar with CSS, but I am do not have a clue where to start converting this from FW code to CSS.

                     

                    Any examples or LINKS will be appreciated.

                     

                    Thanks again everyone!

                     

                    You don't want to start with that code as a base. It will be harder than starting from scratch. You'd have to start by removing all the unnecessary spacer cells. Then, you're left with cells that have unhelpful names like "unipanelversion2fFIN_r2_c16" making it difficult for you to know what you are working with. Even if you clean up that table, you won't have addressed the breaking problem unless you redesign to allow for varying font sizes in text cells. So...throw that code away and start fresh.

                     

                    You might check out the recommendations by Nadia and me in this thread: http://forums.adobe.com/thread/440805?tstart=0

                     

                    Good luck!

                    • 7. Re: fireworks sliced graphics appear cracked in FIREFOX
                      systemFX Level 1

                      Ok, one last go at trying to save all the work I have done previously...

                       

                      The problem here is that my graphic isn't just a nice sliced mosaic style graphic. It was a intricate slicing job with over 18 mouse over style buttons and some embedded flash displays. Not to mention graphical optimization and all this was placed ontop of a Cold Fusion 7 page.

                       

                      It was not simple by any stretch of the imagination.

                       

                      I am prepared to rework the whole over from scratch, but I have yet to see something that will help with the "re-renovation" of my site.

                       

                      I have never seen a software package that can do complex slicing like fireworks or even photoshops SVG studio, that is CSS compliant and (firefox compliant). Doing it by manually placing tiny mosaic pieces in CSS doesn't sound very effecient, it would take forever, due to one hundred pieces in the slicing job.

                       

                       

                      All of you have basically said that I need to start over, but can anyone recommend a software tools for complex slicing and buttons and embedded flash displays while still being 100% CSS and WWW3 Compliant? Or point me to a CSS tool/technique that can do it. So far, all the recommendations have fallen short of solving this dilemna.

                       

                      I am almost considering ignoring the issue until firefox straightens this out...(by the way, the previous version of Firefox was not an issue, but the new version is...)

                       

                       

                      It's a challenge I know, but any input on this is welcome.

                       

                      Thanx again.

                      • 8. Re: fireworks sliced graphics appear cracked in FIREFOX
                        systemFX Level 1

                        Please ignore that previous post...I found it. Fireworks has the ability to export as CSS layers....

                         

                         

                        I think I answered my own question.  Doh!

                         

                         

                        thanx again everyone!

                        • 9. Re: fireworks sliced graphics appear cracked in FIREFOX
                          pixlor Level 4

                          There's nothing wrong with your optimized images--reuse those. You just don't want to work from that code!

                           

                          Have you found this Adobe tutorial: http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html ?

                           

                           

                          • 10. Re: fireworks sliced graphics appear cracked in FIREFOX
                            systemFX Level 1

                            yep taken a look at it now, thanx mate

                             

                            should also be helpfull.