IE9 strange green blob

http://www.spw-law.co.uk/about-us.html

See screenshot, what is causing this green blob?
Capture.PNG
Luv2MuffAsked:
Who is Participating?
 
user_nConnect With a Mentor Commented:
try first to write it right not oerflow but overflow
and then you can just remove the border in area http://www.w3schools.com/css/css_border.asp
try to remove area at all
or
area{border:0px;overflow:hidden;}
or
remove
area{border:1px solid #59ff00;oerflow:hidden;}
from the http://www.spw-law.co.uk/css_custom.css?1315491995
0
 
manu4uCommented:
What is your Antivirus? .. Have seen similar with AVAST ANTI VIRUS Web Shield . ...
0
 
Luv2MuffAuthor Commented:
Nope I do not think it is that, I do not have Avast, nor does my client who can also see it on there machine
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
user_nCommented:
There is an html code

<map name="links">
<area shape="rect" coords="0,0,270,195" href="construction-engineering.html" />
<area shape="rect" coords="0,195,270,390" href="commercial-property.html" />
<area shape="rect" coords="0,390,270,585" href="intellectual-property.html" />
<area shape="rect" coords="0,585,270,780" href="company-commercial.html" />
</map>


http://www.w3schools.com/tags/tag_map.asp 

I suppose that it is shown in that color
0
 
Luv2MuffAuthor Commented:
Yes,you are right if I delete the map the green block disappears.

But, I need the map.

I presume this is a bug in IE9, is there a fix/workaround that I can use?
0
 
user_nCommented:
In
http://www.spw-law.co.uk/css_custom.css?1315491995
it is defined
area{border:1px solid #59ff00;oerflow:hidden;}

http://www.color-hex.com/color/59ff00
0
 
Luv2MuffAuthor Commented:
Perfect thank you!
0
 
David S.Commented:
Each <area> element should have an alt attribute.
<p><img style="width: 270px; height: 780px;" usemap="#links" src="tl_files/images/boxouts/practice-areas-ad.jpg" alt="Practice Areas" />
<map name="links">
<area shape="rect" coords="0,0,270,195" href="construction-engineering.html" alt="Help avoid stormy waters: Construction &amp; Engineering" />
<area shape="rect" coords="0,195,270,390" href="commercial-property.html" alt="Ensuring a calm outlook: Commercial Property" />
<area shape="rect" coords="0,390,270,585" href="intellectual-property.html" alt="Keeping you on the right track: Intellectual Property" />
<area shape="rect" coords="0,585,270,780" href="company-commercial.html" alt="Guiding you through the tides of change: Company Commercial" />
</map>
</p>

Open in new window

However, it would be even better to use CSS instead of an image map. (CSS and HTML included below.)
ul.imageMap {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  background: 0 0 no-repeat;
}
ul.imageMap li {
  position: absolute;
  display: block;
}
ul.imageMap li a {
  display: block;
  width: 100%;
  height: 100%;
}
ul.imageMap li a span {
  display: block;
  position: absolute;
  left: -9999px;
}
ul#links {
  width: 270px;
  height: 780px;
  background-image: url("tl_files/images/boxouts/practice-areas-ad.jpg");
}
#links li {
  width: 270px;
  height: 195px;
  left: 0;
}
#links li.Construction-Engineering {
  top: 0;
}
#links li.Commercial-Property {
  top: 195px;
}
#links li.Intellectual-Property {
  top: 390px;
}
#links li.Company-Commercial {
  top: 585px;
}

<ul class="imageMap" id="links">
  <li class="Construction-Engineering"><a href="construction-engineering.html" title="Help avoid stormy waters: Construction &amp; Engineering"><span>Help avoid stormy waters <em>Construction &amp; Engineering</em></span></a></li>
  <li class="Commercial-Property"><a href="commercial-property.html" title="Ensuring a calm outlook: Commercial Property"><span>Ensuring a calm outlook <em>Commercial Property</em></span></a></li>
  <li class="Intellectual-Property"><a href="intellectual-property.html" title="Keeping you on the right track: Intellectual Property"><span>Keeping you on the right track <em>Intellectual Property</em></span></a></li>
  <li class="Company-Commercial"><a href="company-commercial.html" title="Guiding you through the tides of change: Company Commercial"><span>Guiding you through the tides of change <em>Company Commercial</em></span></a></li>
</ul>

Open in new window

P.S. Out of curiosity, why did you put the <map> and <img> elements inside separate paragraphs?
0
 
Luv2MuffAuthor Commented:
Hi David, good question! Unsure why this is not my coding, honest!
0
All Courses

From novice to tech pro — start learning today.