3 Replies Latest reply on Oct 13, 2009 9:29 AM by Dave Hogue

    FWCS4simplelayout+CSSandImagesExport=MystifyingPixelGap

    PWHYP

      Hello.

       

      I just created a simple layout prototype in FWCS4 (attached).

       

      I would like to add that I carefully read the content of both articles wrote by Matt Stow (Creating standards-compliant web designs with Fireworks CS4) and John Wylie (Exporting CSS and images in Fireworks CS4) respectively prior to the process.

       

      After I followed the proper guidelines to produce the layout, I exported the file with the CSS and images option.

      I chose to give the DIV a 1px stroke to better see the output.

       

      I am still trying to puzzle out why there is a small pixel gap between the menu area to the left in the prototype and the export file opened in DWCS4.

      I followed the recommendations by Matt Stow to remove the float-clearing divs and assign the class of clearfloat to each of the <li> tags.

       

      Viewing the file either in Safari or Firefox doesn't indicate any improvement in regard of the initial prototype.

       

      So, if someone can point out where is the problem and give me a solution, it might be greatly appreciated.

       

      Thanking you very much in advance.

        • 1. Re: FWCS4simplelayout+CSSandImagesExport=MystifyingPixelGap
          Dave Hogue Level 2

          I'm not sure exactly which gap you mean, because when I overlay your image with the page as rendered in Firefox, the small navigation module has a different height and the right padding within the module is different, the position of the larger content module is slightly different, and the padding between the text and the content module is slightly different.

           

          Most of the time these small discrepancies arise from the way that Fireworks calculates text position: it uses the bounding box of the text object, not the actual pixel location of the text itself (which is what browsers use.) There is always a small gap between the actual text and the text bounding box in Fireworks, so text objects often appear slightly shifted, and when you have multiple text objects horizontally adjacent, this shift becomes amplified as the number of text objects increases.

           

          There is not always a fix available from within Fireworks, because many objects are placed relative to the preceding objects. In some cases (especially when text is involved), it is easier and better to simply edit the CSS file and correct for a few misplaced pixels here and there.

           

          (Also, I noticed that the right margin of the navigation links is askew - you can correct this by using link symbols instead of individual link symbols. The list symbols will create a <ul></ul> where all list items share the same right margin and padding.)

           

          Dave

          • 2. Re: FWCS4simplelayout+CSSandImagesExport=MystifyingPixelGap
            PWHYP Level 1

            Hi Dave.

             

            Thanks a lot for your quick answer.

             

            It is my understanding that FireWorks does a great job of CSS and 

            images export but nonetheless, quick CSS editing is sometimes required 

            to correct the layout and get the proper overall view of the prototype.

             

            PWhyP

             

            Le 09-10-09 à 19:47, Dave Hogue a écrit :

             

            I'm not sure exactly which gap you mean, because when I overlay your 

            image with the page as rendered in Firefox, the small navigation 

            module has a different height and the right padding within the 

            module is different, the position of the larger content module is 

            slightly different, and the padding between the text and the content 

            module is slightly different.

            >

            Most of the time these small discrepancies arise from the way that 

            Fireworks calculates text position: it uses the bounding box of the 

            text object, not the actual pixel location of the text itself (which 

            is what browsers use.) There is always a small gap between the 

            actual text and the text bounding box in Fireworks, so text objects 

            often appear slightly shifted, and when you have multiple text 

            objects horizontally adjacent, this shift becomes amplified as the 

            number of text objects increases.

            >

            There is not always a fix available from within Fireworks, because 

            many objects are placed relative to the preceding objects. In some 

            cases (especially when text is involved), it is easier and better to 

            simply edit the CSS file and correct for a few misplaced pixels here 

            and there.

            >

            (Also, I noticed that the right margin of the navigation links is 

            askew - you can correct this by using link symbols instead of 

            individual link symbols. The list symbols will create a <ul></ul> 

            where all list items share the same right margin and padding.)

            >

            Dave

            >

            • 3. Re: FWCS4simplelayout+CSSandImagesExport=MystifyingPixelGap
              Dave Hogue Level 2

              Yes, Fireworks does a good job of giving you a solid starting point for the CSS and HTML, but almost everyone agrees that the output can be improved with some editing after export. Personally, I use the CSS Export feature if I need to show a quick mock-up to a client and as the starting point for more complex and optimized code - Fireworks can save a lot of time by getting things started, but I think you end up with a better result if you take the time to optimize the code.

               

              Dave