Why will this run in Chrome but not in IE?

Posted on 2013-06-29
Medium Priority
Last Modified: 2013-06-29
I know very little about HTML and CSS so please show me what to do.

These hot-spots show a border in Chrome and Opera but not in IE.

Can someone show me what to do to make these hot-spots have a border in all popular browsers?

Thank you.

<!DOCTYPE html>

<style type="text/css">
    dl.image_map {display:block; width:313px; height:106px; position:absolute; margin:2px auto 2px auto;}
    a.LINK0 {left:13px; top:55px; background:transparent;}
    a.LINK0 {display:block; width:125px; height:0; padding-top:19px; overflow:hidden; position:absolute;}
    a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK1 {left:173px; top:35px; background:transparent;}
    a.LINK1 {display:block; width:135px; height:0; padding-top:19px; overflow:hidden; position:absolute;}
    a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK2 {left:173px; top:75px; background:transparent;}
    a.LINK2 {display:block; width:135px; height:0; padding-top:19px; overflow:hidden; position:absolute;}
    a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}

<body style="font-family: Verdana">
<blockquote style="margin-right: 0px" dir="ltr">

<dl class="image_map">
	<dd><a class="LINK0" ></a></dd>
	<dd><a class="LINK1" ></a></dd>
	<dd><a class="LINK2" ></a></dd>

<img alt="" src="HS2.jpg" width="313" height="106" />

<blockquote style="margin-right: 0px" dir="ltr">
  <p>bottom<br /></p></blockquote>

Open in new window

Question by:NDennisV
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
  • 5
  • 2
  • 2
  • +2
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39286495
What's a hot spot??
LVL 58

Expert Comment

by:Julian Hansen
ID: 39286586
There is a lot wrong with this code. Before trying to make shakey code work it might be better to understand what you are trying to do.

Are you trying to create clickable regions on an image? If so you want to look at image maps rather than the method you are trying now.

Give us an idea of what we are trying to do and we can then suggest the correct method to follow.

Author Comment

ID: 39286669
Yes it says image-map in the code but I remember them as hot-spots.

http://www.image-maps.com/ got me started so I assumed it was good/modern code.

There is an image at the bottom of the code.

Like I said I know very little about this.

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!

LVL 53

Accepted Solution

COBOLdinosaur earned 1000 total points
ID: 39286710
I assumed it was good/modern code

There is no such thing as "modern" for this very old technique.  We don't see hotspots used much anymore; too much of a hassle in a world where "responsive is the order of the day.

The problem with IE might simply be the use of dashed.  IE has always been a little wonky with dashed and dotted (though I thought they had if fixed as of IE8.  Also borders on images have always been done differently in IE.

That said it does not look like you are actually using an imagemap.  Those are just just links overlaid on an image.

If you actually want to use an imagemap then :
might help.


Author Comment

ID: 39286733
Sorry, that link does not help me. I need CSS that works in all browsers.
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39286986
Note that in <a class="LINK0" ></a> , there is no HTML between the tags... which means there is Nothing to click on.  Had this same thing come up two days ago.

Author Comment

ID: 39287027
Thanks David.

This is part of a bigger project and I really need some help and I'm willing to pay.

Are you available?
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39287045
No, I have about 6 projects I'm working on already.

Author Comment

ID: 39287047
Thanks anyways. Anyone you can recommend?
LVL 58

Expert Comment

by:Julian Hansen
ID: 39287074
@NDennisV - I think I know what you want here - can't look at it right now but maybe mail me or post back here next week and we can maybe sort something out.

Author Comment

ID: 39287081
I'll contact you soon - Thanks

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

719 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