PDA

View Full Version : coords problem with IE



AmmO
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

RichestBoy
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)

AmmO
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">
</map>

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

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

AmmO
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

AmmO
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;}


/*---------------------------------------------------------------------------------------------------------------------
FLOATING SEARCHBAR STYLES

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{
font-size:18px;
padding:15px;

}

#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 {
position:relative;
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;
color:#FFF;
}
table th {

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

AmmO
Dec 12th, 2008, 10:27 AM
^bump

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


^bump

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

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

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

AmmO
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">
<html>
<head>
<title>
Aberdare
</title>

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



</head>

<body>

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

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


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



</div>
<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">

</map>
</div>
</div>

</body>

</html>

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

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

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