IE vs Firefox issues with positions in the image map

Hello webmaster world members,

I am a new member but have using the forums as reference for years and greatly appreciate the expertise here.

I have been attempting to create a page with an image map of drop down menus through CSS with unordered lists. I have been able to create the page and got it to work fine but the position of the drop down menus are a bit different between IE vs Firefox, Chrome, and Safari. After some research off the web, I found many state there are differences in the default values of some of the elements between browsers. I am not sure if this is the issue, but I have played around with different floats and positions, as well as reseting the margins, padding, and all of CSS but none seem to work.

Each drop down menu pops up on the mouse hover over the image map. But for some reason each and every drop down menu is off vertically bet IE and the other browsers. Not only that, each drop down menu is positioned a bit farther down then the menu before it in the other browsers than IE, starting with the very first one. I am not extensively trained in CSS, so any help would be greatly appreciated.


<style>
ul.vmenu, ul.vmenu li, ul.vmenu ul {
 list-style: none;
 width: 100px; /* Root Menu Width */
 margin: 0px;
 padding: 5px;
}
ul.vmenu li { float: left; position: relative; width: 100%; }
ul.vmenu li.iehover { z-index: 1000; }

ul.vmenu ul {
 width: 155px;
 position: absolute;
 top: 0px;
 left: 100%;
 display: none;
 z-index: 9999;
 background-color: #FFFFFF;
 border: 1px solid #D5D6D7; /* surrounding border */
}

ul.vmenu ul li {
 padding-left: 0;
}

/* Root Menu */
ul.vmenu a {
 display: block;
 background: ##FFF;
 text-decoration: none;
 height: 1%;
}

/* 2nd Menu */
ul.vmenu li:hover li a, ul.vmenu li.iehover li a { 
float: none; 
}

/* Hover Function - Do Not Move */
ul.vmenu li:hover ul ul, ul.vmenu li:hover ul ul ul, ul.vmenu li.iehover ul ul, ul.vmenu li.iehover ul ul ul { display: none; }
ul.vmenu li:hover ul, ul.vmenu ul li:hover ul, ul.vmenu ul ul li:hover ul, ul.vmenu li.iehover ul, ul.vmenu ul li.iehover ul, ul.vmenu ul ul li.iehover ul { display: block; }
</style>

<img src="/dev/shaun/locations/images/world-locations-map.gif" border=0 alt="" usemap="#worldwide-locations">

<ul class="vmenu">
<map name="worldwide-locations">
 <li>
 <area shape="rect" alt="" coords="185,146,277,188" href="/company/locations/all-locations/" id="north-america" />
 <ul style="position: absolute; top:-323px; left: 190px">
<h4>North America</h4>
 <li><a href="">Country 1</a></li>
 <li><a href="">Country 2</a></li>
 <li><a href="">Country 3</a></li>
 <li><a href="">Country 4</a></li>
 </ul>
 </li>
 <li>
 <area shape="rect" alt="" coords="439,102,530,146" href="/company/locations/all-locations/" id="europe" />
 <ul style="position: absolute; top:-371px; left: 438px">
<h4>Europe</h4>
 <li><a href="">Country 1</a></li>
 <li><a href="">Country 2</a></li>
 <li><a href="">Country 3</a></li>
 <li><a href="">Country 4</a></li>
 </ul>
 </li>
 <li>
 <area shape="rect" alt="" coords="528,155,620,198" href="/company/locations/all-locations/" id="west-asia" />
 <ul style="position: absolute; top:-324px; left: 528px">
<h4>West Asia</h4>
 <li><a href="">Country 1</a></li>
 <li><a href="">Country 2</a></li>
 <li><a href="">Country 3</a></li>
 <li><a href="">Country 4</a></li>
 </ul>
 </li>
 <li>
<area shape="default" nohref="nohref" alt="" />
</map>
</ul>

[edited by: vivazapata at 12:38 am (utc) on Aug 28, 2012]

IE vs Firefox issues with positions in the image map

vivazapata

vivazapata

vivazapata

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week