Solved

Why will this run in Chrome but not in IE?

Posted on 2013-06-29
11
367 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 43

Expert Comment

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

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.
0
 

Author Comment

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

Thanks
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 53

Accepted Solution

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

Cd&
0
 

Author Comment

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

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.
0
 

Author Comment

by:NDennisV
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?
0
 
LVL 83

Expert Comment

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

Author Comment

by:NDennisV
ID: 39287047
Thanks anyways. Anyone you can recommend?
0
 
LVL 54

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.
0
 

Author Comment

by:NDennisV
ID: 39287081
I'll contact you soon - Thanks
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 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