homepage Welcome to WebmasterWorld Guest from 23.22.217.122
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE vs Firefox issues with positions in the image map
vivazapata




msg:4488906
 12:18 am on Aug 28, 2012 (gmt 0)

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]

 

vivazapata




msg:4488908
 12:25 am on Aug 28, 2012 (gmt 0)

sorry for the double post, edited first post to make a bit shorter.

vivazapata




msg:4489223
 7:31 pm on Aug 28, 2012 (gmt 0)

after some more trial and error, I have been able to figure out how to fix the issue. Although it is not a comprehensive fix, it works. I added !important codes to force different locations between IE and the other browsers.


<ul class="vmenu">
<map name="worldwide-locations">
<li>
<area shape="rect" alt="" coords="185,146,277,188" href="/dev/shaun/locations/worldwide.cfm" id="north-america" />
<ul style="position: absolute; top:-321px!important; top:-324px; left: 185px">
<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="/dev/shaun/locations/worldwide.cfm" id="europe" />
<ul style="position: absolute; top:-374px!important; top:-372px; 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved