Fireworks CSS causing a headache

Discussion in 'HTML' started by laptopia@gmail.com, Aug 23, 2007.

  1. Guest

    When I export a page from fireworks it creates a table based layout
    and it creates a single CSS tag without which all the images in the
    table cells will have unnecessary space around them.

    I want to get rid of this tag, because its causing problems with a
    great PHP gallery that I like to use on my sites.

    here is the tag:
    td img { display: block; }

    without this tag I will get spaces all the images contained in the
    cells..

    Cheers,
    Igor Terzic
    Creative Director
    http://stikimedia.com
     
    , Aug 23, 2007
    #1
    1. Advertising

  2. wrote:
    > When I export a page from fireworks it creates a table based layout
    > and it creates a single CSS tag without which all the images in the
    > table cells will have unnecessary space around them.
    >
    > I want to get rid of this tag, because its causing problems with a
    > great PHP gallery that I like to use on my sites.
    >
    > here is the tag:
    > td img { display: block; }
    >
    > without this tag I will get spaces all the images contained in the
    > cells..


    Then don't use FW to create your layouts. I am using FW on a daily base,
    and I would never use it to spit out complete HTML-pages. I suggest you
    use it as your image manipulation and slicing tool. And let it export
    only the sliced images. That's what it has been created for. If properly
    used FW is the most powerful tool a webdesigner can get these days, but
    use Notepad++, vim, UltraEdit or any other full grown editor to create
    your HTML-documents.

    HTH
    bernhard




    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 23, 2007
    #2
    1. Advertising

  3. Martin Jay Guest

    On Thu, 23 Aug 2007 14:22:52 -0700, wrote:

    >When I export a page from fireworks it creates a table based layout
    >and it creates a single CSS tag without which all the images in the
    >table cells will have unnecessary space around them.


    Ouch! The words 'table,' 'based' and 'layout' really shouldn't be
    used in such close proximity to each other. :)

    Some browsers add space to the bottom of images, which is equivalent
    to that taken up by the under-hanging parts of letters such as g, p, j
    and y.

    >I want to get rid of this tag, because its causing problems with a
    >great PHP gallery that I like to use on my sites.
    >
    >here is the tag:
    >td img { display: block; }
    >
    >without this tag I will get spaces all the images contained in the
    >cells..


    There are a few ways around this. Perhaps the easiest is to give the
    table created by Fireworks a class, and then only apply the CSS to the
    td img elements in that class.

    So, in the HTML add style="fireworks" to the table element created by
    Fireworks.

    So: <table>

    becomes: <table class="fireworks">

    And then modify the CSS from:

    td img { display: block; }

    to:

    ..fireworks td img { display: block; }
    --
    Martin Jay
     
    Martin Jay, Aug 24, 2007
    #3
  4. dorayme Guest

    In article <fal24p$97o$>,
    Bernhard Sturm <> wrote:

    > I am using FW on a daily base,
    > and I would never use it to spit out complete HTML-pages. I suggest you
    > use it as your image manipulation and slicing tool


    Why are you slicing things these days?

    [btw, there is a little ? I want to ask you in case you know, it
    is rare to catch a FW user: is there a way to set as default the
    type of file you want to prepare for the web when the "Export
    Preview" Window is fired up? Mine is to gif but I prepare jpgs
    far more often. Be nice to have it so default. I am using a Mac
    and FF Version 7 2004. This is a little something I have never
    quite figured.]

    --
    dorayme
     
    dorayme, Aug 24, 2007
    #4
  5. Guest

    On Aug 23, 6:41 pm, Martin Jay <> wrote:
    > On Thu, 23 Aug 2007 14:22:52 -0700, wrote:
    > >When I export a page from fireworks it creates a table based layout
    > >and it creates a single CSS tag without which all the images in the
    > >table cells will have unnecessary space around them.

    >
    > Ouch! The words 'table,' 'based' and 'layout' really shouldn't be
    > used in such close proximity to each other. :)
    >
    > Some browsers add space to the bottom of images, which is equivalent
    > to that taken up by the under-hanging parts of letters such as g, p, j
    > and y.
    >
    > >I want to get rid of this tag, because its causing problems with a
    > >great PHP gallery that I like to use on my sites.

    >
    > >here is the tag:
    > >td img { display: block; }

    >
    > >without this tag I will get spaces all the images contained in the
    > >cells..

    >
    > There are a few ways around this. Perhaps the easiest is to give the
    > table created by Fireworks a class, and then only apply the CSS to the
    > td img elements in that class.
    >
    > So, in the HTML add style="fireworks" to the table element created by
    > Fireworks.
    >
    > So: <table>
    >
    > becomes: <table class="fireworks">
    >
    > And then modify the CSS from:
    >
    > td img { display: block; }
    >
    > to:
    >
    > .fireworks td img { display: block; }
    > --
    > Martin Jay




    Thanks Martin, I should kick my self for not noticing the obvious, but
    I think that comes with the job we're doing. Most of the time the
    problems that take up the most time are because I fail to see the more
    obvious of the solutions. Maybe they just seem obvious when you figure
    it all out..

    I had to wrap the gallery with another table and set its (td img)
    property to inline and it worked.

    Cheers,
    Igor Terzic
    Creative Director
    www.stikimedia.com
     
    , Aug 24, 2007
    #5
  6. dorayme wrote:
    > In article <fal24p$97o$>,
    > Bernhard Sturm <> wrote:
    >
    >> I am using FW on a daily base,
    >> and I would never use it to spit out complete HTML-pages. I suggest you
    >> use it as your image manipulation and slicing tool

    >
    > Why are you slicing things these days?


    because it's the most efficient workflow these days for a webdesigner.
    When I design I usually prepare a mood or mockup of a typical page of
    the site to demonstrate the navigational design and the look and feel
    for the customer. I design those mockups with FW. I can then simply use
    those mockups as the source for the sliced images, and because there are
    still design cycles involved after having finished the real template of
    the site, it is much convenient to have a sliced FW source. BTW: I am
    currently doing a screendesign for a big web based GIS application.
    There are over 80 toolbar buttons in 3 states to be designed. Imagine
    this job without FW? (I use _a lot_ the color search and replace
    function in FW :)

    >
    > [btw, there is a little ? I want to ask you in case you know, it
    > is rare to catch a FW user: is there a way to set as default the
    > type of file you want to prepare for the web when the "Export
    > Preview" Window is fired up? Mine is to gif but I prepare jpgs
    > far more often. Be nice to have it so default. I am using a Mac
    > and FF Version 7 2004. This is a little something I have never
    > quite figured.]


    I am using FW CS3, and I couldn't find something to set the default
    export type... I never noticed this as the export heavily depends on
    your images content. So I always switch between the various export types
    (GIF, JPG, PNG) depending on the image.

    cheers
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #6
  7. stiki Guest

    On Aug 24, 1:42 am, Bernhard Sturm <> wrote:
    > dorayme wrote:
    > > In article <fal24p$>,
    > > Bernhard Sturm <> wrote:

    >
    > >> I am using FW on a daily base,
    > >> and I would never use it to spit out complete HTML-pages. I suggest you
    > >> use it as your image manipulation and slicing tool

    >
    > > Why are you slicing things these days?

    >
    > because it's the most efficient workflow these days for a webdesigner.
    > When I design I usually prepare a mood or mockup of a typical page of
    > the site to demonstrate the navigational design and the look and feel
    > for the customer. I design those mockups with FW. I can then simply use
    > those mockups as the source for the sliced images, and because there are
    > still design cycles involved after having finished the real template of
    > the site, it is much convenient to have a sliced FW source. BTW: I am
    > currently doing a screendesign for a big web based GIS application.
    > There are over 80 toolbar buttons in 3 states to be designed. Imagine
    > this job without FW? (I use _a lot_ the color search and replace
    > function in FW :)
    >
    >
    >
    > > [btw, there is a little ? I want to ask you in case you know, it
    > > is rare to catch a FW user: is there a way to set as default the
    > > type of file you want to prepare for the web when the "Export
    > > Preview" Window is fired up? Mine is to gif but I prepare jpgs
    > > far more often. Be nice to have it so default. I am using a Mac
    > > and FF Version 7 2004. This is a little something I have never
    > > quite figured.]

    >
    > I am using FW CS3, and I couldn't find something to set the default
    > export type... I never noticed this as the export heavily depends on
    > your images content. So I always switch between the various export types
    > (GIF, JPG, PNG) depending on the image.
    >
    > cheers
    > bernhard
    >
    > --www.daszeichen.ch
    > remove nixspam to reply


    Bernhard,

    What do you mean color search and replace? can you actually search for
    #000000 and replace it with #cccccc? if so, how?

    Igor Terzic
    Creative Director
    www.stikimedia.com
     
    stiki, Aug 24, 2007
    #7
  8. Re: Fireworks CSS causing a headache (OT)

    Changed the subject to OT

    stiki wrote:

    >
    > Bernhard,
    >
    > What do you mean color search and replace? can you actually search for
    > #000000 and replace it with #cccccc? if so, how?
    >


    Yes you can (and even more): Press [Ctrl] + [F], and then select in the
    first dropdown where to search (I usually have 'entire document') in the
    second dropdown you have to pick 'Color search') then two color select
    boxes appear: one for the color to be replaced, and the other with the
    new color. In the last dropdown you can define on what the new color
    shall be applied: you can apply it to everything from brushes to
    fillings and effects.

    cheers
    bernhard

    BTW: learn to quote. Quote only the relevant parts.

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #8
  9. dorayme Guest

    In article <faluk5$3re$>,
    Bernhard Sturm <> wrote:

    > dorayme wrote:
    > > In article <fal24p$97o$>,
    > > Bernhard Sturm <> wrote:
    > >
    > >> I am using FW on a daily base,
    > >> and I would never use it to spit out complete HTML-pages. I suggest you
    > >> use it as your image manipulation and slicing tool

    > >
    > > Why are you slicing things these days?

    >
    > because it's the most efficient workflow these days for a webdesigner.
    > When I design I usually prepare a mood or mockup of a typical page of
    > the site to demonstrate the navigational design and the look and feel
    > for the customer. I design those mockups with FW. I can then simply use
    > those mockups as the source for the sliced images, and because there are
    > still design cycles involved after having finished the real template of
    > the site, it is much convenient to have a sliced FW source. BTW: I am
    > currently doing a screendesign for a big web based GIS application.
    > There are over 80 toolbar buttons in 3 states to be designed. Imagine
    > this job without FW? (I use _a lot_ the color search and replace
    > function in FW :)
    >


    Well, good for you. I left slicing way behind after my first
    attempt at a website. I made a home page that was one of the best
    looking I have ever made. But it was a nightmare to work with and
    that was it, bye bye. I still have a remnant for a couple of
    pages, they too look nice and I keep putting off redesigning
    them. The JS and table layout that holds it together so amazingly
    would be sure to get me killed here.

    But your use sounds very much more sophisticated than anything I
    did.


    > > [btw, there is a little ? I want to ask you in case you know, it
    > > is rare to catch a FW user: is there a way to set as default the
    > > type of file you want to prepare for the web when the "Export
    > > Preview" Window is fired up? Mine is to gif but I prepare jpgs
    > > far more often. Be nice to have it so default. I am using a Mac
    > > and FF Version 7 2004. This is a little something I have never
    > > quite figured.]

    >
    > I am using FW CS3, and I couldn't find something to set the default
    > export type... I never noticed this as the export heavily depends on
    > your images content. So I always switch between the various export types
    > (GIF, JPG, PNG) depending on the image.
    >


    Well, that seems to be the same experience as mine. Pity. Would
    have thought that by CS3 time they would have included a little
    sophistication on this score.

    --
    dorayme
     
    dorayme, Aug 24, 2007
    #9
  10. dorayme wrote:
    > In article <faluk5$3re$>,
    > Bernhard Sturm <> wrote:


    >> I am using FW CS3, and I couldn't find something to set the default
    >> export type... I never noticed this as the export heavily depends on
    >> your images content. So I always switch between the various export types
    >> (GIF, JPG, PNG) depending on the image.
    >>

    >
    > Well, that seems to be the same experience as mine. Pity. Would
    > have thought that by CS3 time they would have included a little
    > sophistication on this score.
    >


    amasingly Adobe did not a lot to update FW. It is now better integrated
    into PS (you can still use all installed PS-filters), and FW has now
    multilevel layers, and the best thing for protoyping: you can now use
    multiple pages in a single document. This makes life easier while
    developing a design and going back and forth between the different
    versions of the layout.

    cheers
    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #10
  11. Andy Dingley Guest

    On 23 Aug, 23:36, Bernhard Sturm <> wrote:

    > I suggest you use it as your image manipulation and slicing tool.


    What's "image slicing", and what does that have to do with web design,
    any time this century?
     
    Andy Dingley, Aug 24, 2007
    #11
  12. Andy Dingley wrote:
    > On 23 Aug, 23:36, Bernhard Sturm <> wrote:
    >
    >> I suggest you use it as your image manipulation and slicing tool.

    >
    > What's "image slicing", and what does that have to do with web design,
    > any time this century?
    >


    just out of curiosity: how do you do webdesign in this century?

    bernhard
    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #12
  13. Andy Dingley Guest

    On 24 Aug, 11:12, Bernhard Sturm <> wrote:

    > > What's "image slicing", and what does that have to do with web design,
    > > any time this century?

    >
    > just out of curiosity: how do you do webdesign in this century?


    By designing for the web, not for paper.
    Web pages aren't magazine pages.
     
    Andy Dingley, Aug 24, 2007
    #13
  14. Andy Dingley wrote:
    > On 24 Aug, 11:12, Bernhard Sturm <> wrote:
    >
    >>> What's "image slicing", and what does that have to do with web design,
    >>> any time this century?

    >> just out of curiosity: how do you do webdesign in this century?

    >
    > By designing for the web, not for paper.
    > Web pages aren't magazine pages.
    >

    Are we talking about the same? This thread is about Adobe FW
    (Fireworks). You might probably not know this product. Check this URL:
    http://www.adobe.com/products/fireworks/ and read the description
    carefully. FW is the worst application for print related design. And
    slicing doesn't literally mean 'to slice a piece of paper' in this
    particular context. It's a way of cutting out images out of a bigger
    image (e.g. a layout with a logo, and you are slicing out the logo
    only). Sliced images are then exported into your /images/ folder, and
    incorporated into CSS classes as backgroun-image for instance. This has
    nothing to do with print.

    HTH
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #14
  15. rf Guest

    "Andy Dingley" <> wrote in message
    news:...
    > On 24 Aug, 11:12, Bernhard Sturm <> wrote:
    >
    >> > What's "image slicing", and what does that have to do with web design,
    >> > any time this century?

    >>
    >> just out of curiosity: how do you do webdesign in this century?

    >
    > By designing for the web, not for paper.
    > Web pages aren't magazine pages.


    Andy, You must check Bernhard's portfolio (from his sig). Image slicing is
    definately the order of the day.

    --
    Richard.
     
    rf, Aug 24, 2007
    #15
  16. Bernhard Sturm <> writes:

    > Andy Dingley wrote:
    >> On 24 Aug, 11:12, Bernhard Sturm <> wrote:
    >>
    >>>> What's "image slicing", and what does that have to do with web design,
    >>>> any time this century?
    >>> just out of curiosity: how do you do webdesign in this century?

    >>
    >> By designing for the web, not for paper.
    >> Web pages aren't magazine pages.
    >>

    > Are we talking about the same? This thread is about Adobe FW
    > (Fireworks). You might probably not know this product. Check this URL:
    > http://www.adobe.com/products/fireworks/ and read the description
    > carefully. FW is the worst application for print related design. And
    > slicing doesn't literally mean 'to slice a piece of paper' in this
    > particular context. It's a way of cutting out images out of a bigger
    > image (e.g. a layout with a logo, and you are slicing out the logo
    > only). Sliced images are then exported into your /images/ folder, and
    > incorporated into CSS classes as backgroun-image for instance. This
    > has nothing to do with print.


    The problem here is context. The slicing you're referring to was a very
    popular method of constructing fixed-width pages that use tables generated
    by ImageReady nested eight levels deep to "control" layout.

    The word "slicing" has gotten such a bad name here as a result that a lot
    of folks have developed a knee-jerk reaction to it, and equate it with
    non-liquid layouts and horrible HTML markup.

    It's unfortunate, because slicing doesn't have to mean fixed-width layout,
    and markup quality is an entirely separate question. A designer who's aware
    of the need for a page to "stretch" when resized can take that need into
    account, creating slices in the master image to accomodate that need. Too
    many folks blame the tools though, when in fact it's the way those tools
    tend to be (ab)used that is the real problem.

    sherm--

    --
    Web Hosting by West Virginians, for West Virginians: http://wv-www.net
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Aug 24, 2007
    #16
  17. Sherm Pendley wrote:

    >
    > It's unfortunate, because slicing doesn't have to mean fixed-width layout,
    > and markup quality is an entirely separate question. A designer who's aware
    > of the need for a page to "stretch" when resized can take that need into
    > account, creating slices in the master image to accomodate that need. Too
    > many folks blame the tools though, when in fact it's the way those tools
    > tend to be (ab)used that is the real problem.
    >


    oh cheers! I wasn't aware of this misunderstanding. Strange as I never
    used the option of exporting entire HTML-pages with FW therefore I
    couldn't understand Andy's reactions.

    thanks
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #17
  18. stiki Guest

    > It's unfortunate, because slicing doesn't have to mean fixed-width layout,
    > and markup quality is an entirely separate question. A designer who's aware
    > of the need for a page to "stretch" when resized can take that need into
    > account, creating slices in the master image to accommodate that need.


    This is an interesting point I was not aware of. How can I create
    create and export to HTML the sites that need to "stretch" using FW?

    Up this only recently I did all my layout design in Photoshop, and
    then used typed all my HTML manually using the free ASP developing
    tool. What made me switch is that I met a few designers who had an
    amazingly profitable business and they used every tool available to
    make their work more efficient and that's when I started to use FW.
    I'm not a fan of its HTML but I can't deny its ability to speed up my
    work flow. Its extremely usefull when a penny pinching client wants
    something for nothing.

    Thanks,
    Igor Terzic
    Creative Director
    www.stikimedia.com
     
    stiki, Aug 24, 2007
    #18
  19. stiki <> writes:

    >> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
    >> and markup quality is an entirely separate question. A designer who's aware
    >> of the need for a page to "stretch" when resized can take that need into
    >> account, creating slices in the master image to accommodate that need.

    >
    > This is an interesting point I was not aware of. How can I create
    > create and export to HTML the sites that need to "stretch" using FW?


    Simple, just use FW (or ImageReady) for what they're good for, creating and
    exporting your images. Then write your own HTML.

    For example, take a look at the CamelBones site in my .sig, using a browser
    such as FireFox that allows you to choose one of the alternate stylesheets.
    Choose the "Black" style. I created the rounded corners and drop shadows in
    ImageReady, then sliced out the corners and tiny repeatable slices for the
    drop shadows.

    All it really takes is a little bit of planning ahead. When you create your
    layout, you need to be looking to see what visual elements can "stretch",
    and create a small repeatable slice to use in those areas.

    sherm--

    --
    Web Hosting by West Virginians, for West Virginians: http://wv-www.net
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Aug 24, 2007
    #19
  20. Sherm Pendley wrote:
    > stiki <> writes:
    >
    >>> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
    >>> and markup quality is an entirely separate question. A designer who's aware
    >>> of the need for a page to "stretch" when resized can take that need into
    >>> account, creating slices in the master image to accommodate that need.

    >> This is an interesting point I was not aware of. How can I create
    >> create and export to HTML the sites that need to "stretch" using FW?


    [snipped a bit]

    >
    > All it really takes is a little bit of planning ahead. When you create your
    > layout, you need to be looking to see what visual elements can "stretch",
    > and create a small repeatable slice to use in those areas.
    >


    That's exactly how one should do it. As Sherm put it: planning is
    essential when working with FW.

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Aug 24, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Microsoft
    Replies:
    1
    Views:
    1,053
    Cowboy \(Gregory A. Beamer\)
    Aug 19, 2003
  2. Replies:
    7
    Views:
    20,149
    John Bokma
    Jan 31, 2006
  3. JD
    Replies:
    5
    Views:
    342
  4. Yvan J. Gagnon
    Replies:
    6
    Views:
    311
    Richard Cornford
    Jul 9, 2003
  5. Yvan J. Gagnon
    Replies:
    0
    Views:
    96
    Yvan J. Gagnon
    Jul 1, 2003
Loading...

Share This Page