«
»

CFIMAGE, the new image manipulation tag in CF8 is a great tag. One of the things its often used for is manipulating an image (resizing, cropping, etc.) and then displaying that image using the action=”writeToBrowser” attribute. If this image is linked to something by wrapping an anchor tag around it, many browsers by default will display a blue border around it.

Example:

Small car, an example photo

If this is undesirable, there are several ways around it. Normally we’d just put a border=”0″ attribute in the <img> tag, but in this case, when we use the cfimage tag with action=”writeToBrowser”, ColdFusion is creating a temporary image and writting out the <img> tag pointing to it. So we can’t add the border=”0″ attribute.

You could use CSS to turn off the border on all your images. In your stylesheet you could use:

<style type="text/css">
img { border: 0px;}
</style>

Thats painting with a wide brush, though. We can also use a little trickier CSS to access the exact image element, by placing a class in the anchor tag that surrounds the image. For example, if you add an class of nobdr to the <a href…> tag, then use this:

<style type="text/css">
.nobdr img {border: 0px;}
</style>

If you want to place that CSS in the header of your document (technically, all style tags should be in your header), yet still have it right above the element in the unrendered source code (I find this easier to maintain later), then drop it into the cfhtmlhead tag:

<cfsavecontent variable="tmpCSS">
<style type="text/css">
.nobdr img {border: 0px;}
</style>
</cfsavecontent>

<cfhtmlhead text="#tmpCSS#">

This entry was posted on 28 July 2008 at 5:46 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

3 Comments

  1. Rachel Lehman says:

    I personally use the universal-no-border-image rule in almost every style sheet I write, I just put it near the top of the style sheet so that subsequent rules overwrite it, and it works really well for me. Another alternative to the universal img tag rule is to use child/descendant selectors which don’t require you to apply a class name to your images. For instance, if my layout has header, nav, sidebar and body blocks, I can declare that header img, nav img, and sidebar img all to have border:none, but my body block can still has images with borders. HTH!

    11 August 2008, 2:23 pm

  2. dharma says:

    thank u so much….. its nice 🙂

    3 November 2008, 5:35 am

  3. Hagerdash says:

    I just read your posts and have a question. If you visit my website and click on the banner image, a new window opens. But if you then go back to my webiste, there’s an annoying small dashed border surrounding my image. I’ve had no problems addressing this in the past, but some reason everything I’ve tried isn’t working. Would you happen to have any suggestions? I researched this on various websites and yet the border won’t go away.

    1 December 2008, 7:59 pm