View Full Version : coords problem with IE

Dec 11th, 2008, 12:57 PM
I have a map image on my web page that has various point dotted about it and using coords your able to click on individual point to go through to a separate page.

The problem im having is that in Firefox I can click on the exact point to get to the relevent page but in IE7 and 6 but not 8 you have to move 2/3pixles up and/or left/right to click on the point.

Is this a known bug or is there a work around for it. Ive tried searching but have had little luck

Dec 11th, 2008, 01:29 PM
in IE You can not use following CSS combination.

padding-left/padding-right with width
padding-top/padding-bottom with height.

This might help check your code.

oscommerce Solutions (http://www.complete-oscommerce.com)

Dec 11th, 2008, 01:31 PM
Heres the Relevent Code im using

<img src="map.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map">
<map id="imgMap" name="imgMap">
<area href="../../43481.htm" alt="XXXXXXXXl" title="XXXXXXXX" shape="rect" coords="769,259,777,267">

Dec 11th, 2008, 01:34 PM
Havent used any padding where ive used height or width

Dec 11th, 2008, 01:40 PM
Send Link where you have problem.

Dec 11th, 2008, 01:42 PM
The page is not uploaded yet and contains some sensitive data wich would be a pain to remove before i could post it somwhere readily availble.

All i need to know is there something that could throw of coordinate strings in IE 6+7 but not FF or IE8

Dec 11th, 2008, 04:47 PM
heres My Css if that helps matters

*{ font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px; margin:0; padding:0; overflow:auto;}


to change the background/border colours, change their #xxxxxx values in the top style

#topbar{text-align: center; position: absolute; border: 2px solid #FFCB03; padding: 2px; background-color: #000000; width: 370px; height: 55px; visibility: hidden; z-index: 100; color:#FFF;}
#topbar form { margin-top: 10px;}

/*---------------------------------------- End of Floating searchbar Styles ---------------------------------*/

body{background-color: #000000; }

img {border: 3px solid #FFCB03; padding:0px; margin:0px 0px 5px 0px;}

#map img{ border: 3px solid #FFCB03; margin:0px; padding:5px;}

a:link { text-decoration: none; color: #FFF; cursor: pointer; cursor: hand;}
a:visited { text-decoration:none; color: #FFF; cursor: pointer; cursor: hand;}
a:active {text-decoration:none; color:#58585A; cursor: pointer; cursor: hand;}
a:hover { text-decoration: none; color: #FFCB03; cursor: pointer; cursor: hand;}

#container{padding:0px; margin:0px;}

#menu a{


#menu{width:1034px; height:25px; padding:0px; margin: 0px; border-left: 3px solid #FFCB03; border-right: 3px solid #FFCB03; border-top: 3px solid #FFCB03;}

.drop_down{background-color: #000; color:#FFF; font-size: 16px; float:right; text-align:center; padding:3px;}

.link {
color: #FFF;
background-color: #000;

.disc {Text-decoration:none; color:#666; font-size:8px; height:30px; padding:0px;}

#footer {width:1034px; height:30px; padding:0px; margin: 0px; border-left: 3px solid #FFCB03; border-right: 3px solid #FFCB03; border-bottom: 3px solid #FFCB03;}

#all{color:#FFCB03; text-align:center; }

#table_body{width:1034px; }

#points{position:relative; left:0%;}

#individual_table{position:relative; left:30.5%;}

table {
left: 35%;
padding: 1px;
Margin: 1px;
border-width: 2px;
border-spacing: 2px;
border-style: outset outset outset outset;
border-color: #FFCB03;
border-collapse: separate;
background-color: #000;
table th {

border-width: 2px;
padding: 4px 4px 4px 4px;
border-style: outset outset outset outset;
border-color: #FFCB03;
background-color: #000;
table td {
text-align: center;
border-width: 2px;
padding: 6px;
border-style: inset inset inset inset;
border-color: #FFCB03;
background-color: #000;

Dec 12th, 2008, 10:27 AM

Dec 12th, 2008, 10:35 AM
Send Link where you have problem.


Please read http://www.codingforums.com/postguide.htm, especially #3 and #5

Dec 12th, 2008, 02:18 PM
I have read the rules before and just refreshed myself aduraooft and ok i may not have waited 2-3 days as it states but forgive me for being over eager. As for being concise and articulate I believe I have met those requirements if you believe otherwise id happily take aboard any constructive comments to try and make my posts easier to read and solve.

Dec 12th, 2008, 02:24 PM
We can't guess your html and the icluded images from the above CSS.
What we need is a link (or the complete html and the images). If you don't like to show your actual pages/website, you may upload a sample page to some free hosts like freehostia. I've used image map, but never noticed such issues.

Dec 12th, 2008, 03:24 PM
ok thanks for the input.

Let me re-explain I have a single image the image is a map with dots. When u click on the dot it brigs up a page with a table detailing information about that dot. if u click anywhere else on the map you cring up a table with data about the area the map covers.

Now the location of these dots and the shape of area in each map is sensitive for reasons I can not go into. Each dot is a circle with a 2px diameter. The dots are part of the map as a whole image a gif to be precise. For some reason in IE7 and 6 the link that is supposed to be the dot itself is 1-2 pixels up and right to the location of the dot.

All my styling is done is CSS.

Below i have included the code for of the pages but have removed the sensitive data and have just the one coord string for one of the points. Since I cant do this with the images i can not show them.

Thanks for any suggestions people.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Active Soccer Franchise</title>
<link href="../../activesoccer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../Menu.js"></script>

<script type="text/javascript" src="../../backup.js"></script>



<div id="container">
<div id="header">

<a href="http://www.activesoccer.co.uk"> <img src="../../Activelogo.jpg"> </a>
<div id="menu" style=>

<a href="../../index.htm">Top Level</a>
<a href="javascript: backUp();">Back</a>

<div id="map">
<img src="map.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map">
<map id="imgMap" name="imgMap">
<area href="../../XXX.htm" alt="XXX" title="XXX" shape="rect" coords="437,161,444,169">




Dec 12th, 2008, 03:30 PM
It can't be a circle if it is 2px. It has to be a square or a parallelogram of some type. Not important of course.

Have you considered the "sweet" spot on a mouse pointer? Perhaps its the cause of the problem.

Dec 12th, 2008, 11:18 PM
IE6 & 7 don't like the padding on the image:

#map img{ border: 3px solid #FFCB03; margin:0px; padding:5px;}

Essentially, the image is shifted 5px down and right while the image map ignores the shift.

Dec 16th, 2008, 10:41 AM
Thanks fishluvr took out the padding and border off and that seems to have solved the problem, However the reason i had the padding/border was because it made the folder look good. Is there possibly anyway of getting IE to stop doing this.