2 Replies Latest reply on Jan 5, 2009 2:52 PM by morriske

    Creating standards-compliant web designs with Fireworks CS4 Problems


      i have some problems with using background image slices.

      here is it(from the DevNet arcticle creating standards compliant web designs with fireworks cs4):

      With this feature, seeing really is believing, so let's get straight to it:

      1. Create a new 500 × 500 document.
      2. Draw a 200 × 40 rectangle.
      3. Set the background color as #000099.
      4. Set its fill to be a Linear gradient.
      5. Change the first Gradient node's color to #9999FF.
      6. Select Edit > Insert > Rectangular Slice.

      Change the following properties In the Property Inspector:
      * Name: bg_rect
      * Width: 1px
      * Type: Background Image
      * Repeat: repeat-x
      * Horizontal position: left
      * Vertical position: top
      8. Using the Optimize panel, set the slice's export format to GIF - Exact.
      9. Export as bg_slice.htm using CSS and Images.
      10. Locate the file and preview it in your primary browser.

      i followed these steps exactly but i get no tiled background only the 200 x 40 rectangle.can anyone tell me what's wrong ?

      Kind Regards,

        • 1. Re: Creating standards-compliant web designs with Fireworks CS4 Problems
          Dave Hogue Level 2
          I followed these steps exactly and also viewed the HTML/CSS exported in Firefox 3.0.5, and the rectangle appeared with the correctly tiled gradient background. (I'm on a Win XP SP3 machine.)

          I tried changing the canvas color to transparent, moving the rectangle and slice around, changing the width of the slice, and even changing the horizontal and vertical positioning of the background image, and the export was still correct. Is it possible your background image slice is not placed over the gradient? Have you looked at the CSS exported to confirm that "bg_rect.gif" is listed as the background image for the DIV and that the .GIF file is being exported and is a narrow gradient image? Are all of the export options correct? (There's only a few export options for CSS and images (.htm), so I doubt this is your problem...)

          At risk of asking the obvious, are you using Fireworks CS4 with the updated CSS/HTML extension from the article installed? HTML/CSS export works differently between CS3 and CS4 - John Wylie's extension was created for CS3, and Matt Stow updated it for CS4.

          • 2. Re: Creating standards-compliant web designs with Fireworks CS4 Problems
            I would take out the width of 1px and try setting the image to repeat-y as well. Does that do anything for you??