[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Why will this run in Chrome but not in IE?

Posted on 2013-06-29
11
Medium Priority
?
376 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 45

Expert Comment

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

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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 53

Accepted Solution

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

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 61

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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

591 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