Solved

Why will this run in Chrome but not in IE?

Posted on 2013-06-29
11
363 Views
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>
<html><head><title>HS2</title>

<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;}
</style></head>

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

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

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

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

Open in new window

0
Comment
Question by:NDennisV
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
What's a hot spot??
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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.
0
 

Author Comment

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

Thanks
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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 :
http://www.htmlgoodies.com/tutorials/image_maps
might help.

Cd&
0
 

Author Comment

by:NDennisV
Comment Utility
Sorry, that link does not help me. I need CSS that works in all browsers.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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.
0
 

Author Comment

by:NDennisV
Comment Utility
Thanks David.

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

Are you available?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
No, I have about 6 projects I'm working on already.
0
 

Author Comment

by:NDennisV
Comment Utility
Thanks anyways. Anyone you can recommend?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
@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.
0
 

Author Comment

by:NDennisV
Comment Utility
I'll contact you soon - Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

762 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

13 Experts available now in Live!

Get 1:1 Help Now