2 replies [Last post]
sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 13 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Doc type: DTD XHTML 1.0 Strict
Validated: no errors

Problem: When I place an image map/hot spot around my pictures it displays a blue border. :shrug:
Here's the link: http://home.jps.net/~sandyhon/index_test.html

Here's the code:

Foothill Quilters Guild

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
margin: 0px;
padding: 0px;
color: #333333;
background-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
text-align: center;
}

#wrapper {
margin: 0 auto;
padding: 0px;
position: relative;
color: #333;
text-align: left;
background-image: url(images/bkgd-repeat.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
width: 760px;
}

#header {
margin: 0;
padding: 0;
line-height: 0;
}

/* start topnav styles */
#topnav {
margin: 0;
padding: 0;
background-color: #3d261e;
}

#topnav ul {
margin: 0;
padding: 0px;
list-style: none;
text-align: center;
display: block;
}

#topnav li {
margin: 0;
padding-left: 18px;
display: inline;
background-color: #3d261e;
}

#topnav a:link, #topnav a:visited {
color: #f7a150;
text-decoration: none;
font-weight: bold;
}

#topnav a:hover {
color: #FFFFFF;
}
/* end topnav styles */

#sub-header {
margin: 0px;
padding: 0px;
clear: both;
}

#container {
margin: 0px;
padding: 0px;
width: 760px;
}

#content {
width: 560px;
margin: 0px 0px 0px 165px;
padding: 0px;
}

p {
font: x-small Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: left;
color: #333333;
padding-bottom: 1em;
}

ul {
text-decoration: none;
padding-bottom: 1em;
list-style-type: square;
color: #39616d;
list-style-position: inside;
}

.italic {
font-style: italic;
}

.boldcolor {
font-weight: bold;
color: #66528a;
}

.center {
text-align: center;
}

.clearall {
clear: both;
padding-top: 20px;
}

.content ul {
margin: 0px;
padding: 0px;
}

.content li {
list-style: none;
text-decoration: underline;
line-height: 1.5;
}

.content a:link, a:visited {
font-weight: normal;
color: #196178;
}

.content a:hover {
color: #891b1b;
}

.footer {
clear: both;
color: #333333;
text-align: center;
padding: 20px 0px 10px 0px;
}

/* start home page styles */
#hm-wrapper {
position: relative;
margin: 0 auto;
padding: 0px;
width: 760px;
color: #333333;
background-image: url(images/hm-bkgd-repeat.jpg);
background-repeat: repeat-y;
}

#hm-container {
width: 760px;
margin: 0;
}

#hm-sidebar {
width: 140px;
margin: 0px;
float: left;
text-align: left;
}

#hm-sidebar p {
padding: 0 18px 1em 15px;
line-height: 1.25;
}

#hm-sidebar h1 {
padding: 0 18px 3px 15px;
color: #66528a;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
line-height: normal;
font-weight: bold;
}

#hm-sidebar a:link, a:visited {
font-weight: normal;
color: #333333;
}

#hm-sidebar a:hover {
color: #891b1b;
}

.sb-clearall {
clear: both;
}

.sb-image_left {
float: left;
margin: 0 15px 3px 15px;
}

.sb-image_right {
float: right;
margin: 0 15px 3px 15px;
}

.serifhead {
text-align: center;
font-family: Times-New-Roman, Times, serif;
font-size: x-large;
font-style: italic;
}

#hm-content {
width: 480px;
margin: 0px;
float: left;
}

#hm-content p {
margin: 0;
padding: 0 20px 11m 20px;
text-align: center;
}

#hm-content ul {
margin: 0px;
padding: 0px;
display: block;
list-style: none;
text-align: center;
}

#hm-content li {
display: inline;
text-decoration: underline;
line-height: 1.5;
}

#hm-content a:link, a:visited {
font-weight: normal;
color: #196178;
}

#hm-content a:hover {
color: #891b1b;
}

#hm-rt-sidebar {
width: 140px;
padding: 0;
margin-right: 0px;
float: right;
line-height: 0.5em;
}

#hm-rt-sidebar p {
text-align:center;
padding: 0 22px 1em 22px;
}

#hm-footer {
clear: both;
}
/* end home page styles */






  • Home

  • About Us

  • Programs & Workshops

  • Activities

  • Community Service

  • Quilt Show

  • Gallery

  • Calendar



home subhead




Christine Barnes photo

Color: Tradition & Innovation

by Christine Barnes
Lecture: Jan. 14

Workshop: Jan. 15


Katie Pasquini Masqpust photo

Ghost Layers & Color Washes

by Katie Pasquini Masopust

Lecture: April 14

Workshop: April 15




guild logo

Welcome

to the Foothill Quilters Guild where local area quilters have been getting together since 1982 to share their love

of quilting.

We invite you to explore our website and look forward to meeting you in

the future.



Happy quilting!




The Foothill Quilters Guild presents...


Quilt Show advert




This site is best viewed using current browser versions.
Click below for easy updates:
Firefox | Safari | Netscape | Opera | Internet Explorer

Fast internet now available over standard phone lines! Visit at&t.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Yes. That is standard

Yes. That is standard default behaviour. The same thing will happen if you nest an IMG within an anchor. Apply standard CSS techniques to override browser defaults.

e.g.

img { border: none; }

In your page you appear to using the whole image as a hot spot. If that is the case nest the image within an anchor.

bleh

Image maps are better used when the hot spot is only a portion of the image.

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 13 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Thanks Chris! I simply

Thanks Chris! :thumbsup:
I simply nested the image in an anchor and set the border to none and now it works perfectly!
Sandy