• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

position of hover element not consistent on different browsers

CSS and HTML attached. Here is my page:

http://www.edaefca.org/new

See drop-down menus on the 2nd button.

IE 8.0 actually looks like what I would expect. Safari, Firefox and Chrome all have the drop-down menu overtop the button graphic.

The drop-down menu items with <span class="mainlinksfly"> have a position:absolute, top:0px and left:0px. They have the same width as the <li> element that contains them. So I would think they should position directly under the button, which is where I want them. Why would these browsers have the menu on TOP of the graphic? Just need some way of getting these consistent.

Would appreciate any advice. Thank you!
ul.mainlinks{margin:0px;padding:0px;}
li.mainlinks{position:relative;display:inline;margin:0px;padding:0px;font-family:Myriad,Helvetica,Arial,sans-serif;font-size:11px;width:125px;}
li.mainlinks:hover span.mainlinksfly{display:inline;}
span.mainlinksfly{position:absolute;z-index:2;top:0px;left:0px;width:125px;display:none;}
span.mainlinksfly a, span.mainlinksfly p{background-color:#ebe9e1;display:block;padding:4px 9px 2px 9px;text-decoration:none;}
span.mainlinksfly a:hover{background-color:#d0cec7;}


<ul class="mainlinks">
<li class="mainlinks"><a href="http://www.faithstepscampaign.org" target="_blank"><img src="art/bt_1.jpg" alt="FaithSteps Campaign" width="125" height="42" border="0" /></a></li><li class="mainlinks"><a href="http://www.edaefca.org/new/faithsteps-ministries.asp"><img src="art/bt_2.jpg" alt="FaithSteps Ministries" width="125" height="42" border="0" /></a><span class="mainlinksfly"><a href="http://www.edaefca.org/new/hispanic-mission.asp">Hispanic Mission</a><a href="http://www.edaefca.org/new/gateway.asp">Gateway</a><a href="http://www.edaefca.org/new/cityserve.asp">CityServe</a></span></li><li class="mainlinks"><a href="http://www.edaefca.org/new/church-planting.asp"><img src="art/bt_3.jpg" alt="Church Planting" width="125" height="42" border="0" /></a></li><li class="mainlinks"><a href="http://www.edaefca.org/new/urban-intercultural-ministry.asp"><img src="art/bt_4.jpg" alt="Urban/Intercultural Ministry" width="125" height="42" border="0" /></a><span class="mainlinksfly"><a href="http://www.edaefca.org/new/partnering-opportunities.asp">Partnering Opportunities</a><a href="http://www.edaefca.org/new/wholistic-ministries.asp">Wholistic Ministries</a><a href="http://www.edaefca.org/new/arabic-ministries.asp">Arabic Ministries</a><a href="http://www.edaefca.org/new/chinese-ministries.asp">Chinese Ministries</a><a href="http://www.edaefca.org/new/urban-churches.asp">Urban Churches</a></span></li><li class="mainlinks"><a href="http://www.edaefca.org/new/immigrant-hope.asp"><img src="art/bt_5.jpg" alt="Immigrant Hope" width="125" height="42" border="0" /></a></li><li class="mainlinks"><a href="http://www.edaefca.org/new/support-opportunities.asp"><img src="art/bt_6.jpg" alt="Support Opportunities" width="125" height="42" border="0" /></a></li><li class="mainlinks"><a href="http://www.edaefca.org/new/resources.asp"><img src="art/bt_7.jpg" alt="Resources" width="125" height="42" border="0" /></a></li><li class="mainlinks"><a href="http://www.edaefca.org/new/registrations.asp"><img src="art/bt_8.jpg" alt="Registrations" width="125" height="42" border="0" /></a></li>
</ul>

Open in new window

0
bbdesign
Asked:
bbdesign
  • 4
  • 3
1 Solution
 
BardobraveCommented:
I bet the problem is you are using <a> links to make the main menu elements and normal browsers (those that are not "I made what I want" IE) consider the link to end just after the text, and not where the margins and paddings position it's border.

To solve it your best try should be to use a DIV element to surround the link and use CSS to make this div to look like the menu. This way you control the hover and positioning based on the div (wich is a block-level element, and not a inline-level element as <a> tag is)
0
 
bbdesignAuthor Commented:
I'm not sure I am following you. The main buttons need to be links, so they need <a> tags around them? If you could post a really simple example, that might help.
0
 
BardobraveCommented:
<div><a>buttonLink</a></div>

You pass your css styling to the div element, inside him the link will work as usually, but the positioning of the rest of elements will start after the closure of the div, avoiding your problem.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
bbdesignAuthor Commented:
Are you saying to remove the <li> elements altogether?

<div> would normally be block elements, I need to somehow make them inline? Or do the <div>'s go inside the <li> elements?
0
 
BardobraveCommented:
You can probably use <li> tags instead of <div>, just css the li tags instead of the <a> tags to reach the button form, and position the submenu from those elements.
0
 
bbdesignAuthor Commented:
I tried a bunch of different things, I can't get it to work. IE just insists on being different than everything else. Once I have this perfected I will be able to reuse it for other websites. Its pretty simple, just need to fix the browser problem.
0
 
bbdesignAuthor Commented:
OK, I finally got this to work. I removed the top:0px and adding margin-top:42px and that seems to have fixed it in all browsers!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now