Solved

IE9 strange green blob

Posted on 2011-09-21
9
371 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 7

Expert Comment

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

Author Comment

by:Luv2Muff
ID: 36572645
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
ID: 36572803
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Luv2Muff
ID: 36572857
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
 
LVL 9

Expert Comment

by:user_n
ID: 36572873
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
ID: 36572908
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
ID: 36572987
Perfect thank you!
0
 
LVL 42

Expert Comment

by:David S.
ID: 36574149
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
ID: 36574166
Hi David, good question! Unsure why this is not my coding, honest!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
100% tall div not scrollable on iPhone 3 37
Using Specialized Fonts in CSS 1 61
Best explanation of following code css 11 40
How does this modal work? 3 34
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

751 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