Fog Creek Software
Discussion Board

Knowledge Base
Terry's Tips
Darren's Tips

Image Formating

Anybody know a solution for the following problem?

I have defined various classes for images in my style sheet in order to frame them if they have a white background or to better manage the spacing on the page depending if they show up on the right or left of the article.

City Desk
<img style="MARGIN-RIGHT: 5px" height="112" alt="alternatetext" src="PTMFOG0000000042.jpg" width="170" align="left" border="0" />

What I'd like to have.
<img class="framedimage" alt="alternatetext" src="PTMFOG0000000042.jpg" />

Where the class "framedimage" has a border and a right margin larger than 5px as well as a top, bottom and left margin as well.

I'm trying to set up the site to be edited by someone else without html know how.  So I'm striving for a relatively simple way of managing this.

Thanks in advance for any help.

Sunday, August 1, 2004

Let us know if this works: add the  !important declaration to the CSS for your framedimage class.

For more on !important, see

David Walker
Monday, August 2, 2004

And to get the class="framedimage" attribute into the system, set up a variable called {$.frameThisImage$} or similar, containing the following (including the quotes):

" class="framedimage

Drop this variable into the alternate text/tooltip field of the "Insert picture" window immediately after any alt text to get a framed image.

Since variables aren't available from the "Insert picture" window, you may want to have your users store the variable in a clipboard manager such as CLCL (free and useful for other CityDesk tasks - go to ).

It's a hack, but it works. I'd worry about it more if so many other CMSs didn't require bigger hacks than CityDesk.

The better answer would be for CityDesk to start adding support for divs and classes (and IDs).

David Walker
Monday, August 2, 2004

Good thinking on your part for a work around but no luck so far.  City Desk recognizes the quotation markes in the alt tag and publishes the following when I use double quotes:

<img style="MARGIN-RIGHT: 5px" height="112" alt='" class="framedimage' src="../Images/graphic.jpg" width="170" align="left" border="0" />

and the following when I use single quotes:

<img style="MARGIN-RIGHT: 5px" height="112" alt="' class='framedimage" src="../Images/graphic.jpg" width="170" align="left" border="0" />

Yep, class and div support would be much easier.

Monday, August 2, 2004

Oh yeah, the "! important" declaration in the css worked when I manually edited the class tag.

Monday, August 2, 2004

" ... no luck so far.  City Desk recognizes the quotation marks in the alt tag ..."

This is why you put the whole thing in a variable and stick the variable in the ALT tag box. I've checked, and this technique is working on a site I run.

David Walker
Tuesday, August 3, 2004

Whoops, missed that part.  I was so excited about a solution I didn't re-read your post.

Tuesday, August 3, 2004

*  Recent Topics

*  Fog Creek Home