W3C home > Mailing lists > Public > www-talk@w3.org > March to April 2001

stylesheet for borderless imagemap?

From: Michael D. Crawford <crawford@goingware.com>
Date: Thu, 8 Mar 2001 18:22:34 -0800
Message-Id: <v03007800b6cdec5af420@[192.168.1.2]>
To: www-talk@w3.org
I want to transition my web pages to using HTML 4.01 strict, and before too
long XHTML 4.01 strict.  I'm also starting to check my pages with the W3C
validator.  This means I need to use stylesheets to format appearance.

I'm trying to do something that was very simple in HTML 3.2, but I'm not
able to do it successfully in 4.01 strict.  I want to make an imagemap
where the image doesn't have a blue border around it to indicate that it's
a link.

The only browser I've tried that does what I want is Internet Explorer 4.01
for the Mac.  It is not affected by the style in any way, it just doesn't
show the blue border at all.  Mozilla 0.8 and Navigator 4.05 for Mac OS,
and Navigator 4.73 for Windows persist in showing a blue border now matter
what I do.

If I can't get rid of the border, I'll have to use 4.01-transitional
instead.  The way I get rid of the blue outline is to use the

border="0"

attribute in the <img> element for the map.  No amount of setting the
border or padding size to 0, or setting any colors to transparent or to
match the body background color will help this.  In fact, setting the
colors to anything don't effect this color.

I've tried a lot of stuff like

img:link { color: #ff0000 }	/* fire-engine red */

to see if I can effect the color.

Here's the stylesheet I've settled on so far to try to use when I update
these pages:

http://www.goingware.com/tips/


<!-- /* tips.css */
body {color: #000000; background-color: #d0ffff}
span.banner {text-align: center; color: #d0ffff;  background-color:
transparent}
-->

Here's the HTML for my imagemap:

<p><span class="banner">
<map name="goingware">
<area shape=rect coords="0,0,468,60" href="../index.html"
alt="GoingWare Inc. - Expert Software Development and Consulting">
</map>
<img ismap usemap="#goingware"
        src="../Art/gwle2.gif" height=60 width=468

        alt="GoingWare Inc. - Expert Software Development and Consulting">
</span>
</p>

Thanks for any help you can give me.

Mike

Michael D. Crawford
GoingWare Inc. - Expert Software Development and Consulting
http://www.goingware.com/
crawford@goingware.com

   Tilting at Windmills for a Better Tomorrow.
Received on Thursday, 8 March 2001 18:22:28 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 27 October 2010 18:14:25 GMT