Fireworks CSS causing a headache

[laptopia]

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

 

[Bernhard Sturm]

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

 

[Martin Jay]

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; }

 

[dorayme]

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.]

 

[laptopia]

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.




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; }

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

 

[Bernhard Sturm]

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

 

[stiki]

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

 

[Bernhard Sturm]

Changed the subject to OT

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.

 

[dorayme]

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.

 

[Bernhard Sturm]

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

 

[Andy Dingley]

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?

 

[Bernhard Sturm]

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

 

[Andy Dingley]

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.

 

[Bernhard Sturm]

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

 

[rf]

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.

 

[Sherm Pendley]

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--

 

[Bernhard Sturm]

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

 

[stiki]

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

 

[Sherm Pendley]

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--

 

[Bernhard Sturm]

[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