Solved

IE9 strange green blob

Posted on 2011-09-21
9
363 Views
Last Modified: 2012-05-12
http://www.spw-law.co.uk/about-us.html

See screenshot, what is causing this green blob?
Capture.PNG
0
Comment
Question by:Luv2Muff
9 Comments
 
LVL 7

Expert Comment

by:manu4u
Comment Utility
What is your Antivirus? .. Have seen similar with AVAST ANTI VIRUS Web Shield . ...
0
 

Author Comment

by:Luv2Muff
Comment Utility
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
 
LVL 9

Expert Comment

by:user_n
Comment Utility
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
 

Author Comment

by:Luv2Muff
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Expert Comment

by:user_n
Comment Utility
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
 
LVL 9

Accepted Solution

by:
user_n earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:Luv2Muff
Comment Utility
Perfect thank you!
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 

Author Comment

by:Luv2Muff
Comment Utility
Hi David, good question! Unsure why this is not my coding, honest!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now