Quick CSS menu position fix for IE7

HTML & CSS
1

Hi,

I have been working on this menu for several days. Building the menu was fine, but when it came to testing it in IE7 I was stumped…

Basically what I have is a dropdown menu under the “Selling” menu item. It appears fine in every other browser… In IE7 it positions incorrectly and moves over to the right.

I have spent 3 days searching, fiddling, and trying new things out. Can anyone help me with this?

The code is available via firebug at
http://dustingrof.com/WSI-LucTrahan-Menu/source/index.html

Thanks in advance for the help!

2

Hi, Welcome to SitePoint :slight_smile:

IE6/7 will have problems if you don’t set a left: or right: offset value

When you do that you will need to set the <li> as the containing block for the absolute positioned child (div in your case)

[B].nav li[/B] {
height:30px;
margin:0;
padding:0;
[COLOR=Blue]position:relative;[/COLOR]
}
[B].nav .select_sub[/B] {
display:none;
position:absolute;
[COLOR=Blue]left:0;[/COLOR]
}

Your using multiple UL’s though when they only contain one <li>

That could all be condensed to one parent UL with a nested list for the dropdowns. :wink:

3

Hi dustin_grof! Welcome to SitePoint. :slight_smile:

Could you check that link? It doesn’t seem to work for me.

4

@Rayzur Thank you so much! I can’t believe how quick a response I got compared to the past couple days I have been trying to figure out the same thing…

@ralph.m I clicked it from the post and it worked for me… It is also working when I manually type it in. Thanks for the reply, Rayzur was able to help already :slight_smile:

5

Hey Rayzur, I see what you are saying now with the multiple UL’s, could you suggest how I could combine them into one?

Something like this? (when I do this I get problems with by submenu…)

<ul id="menu">
  <li class="menu47"><a href="/index">Home</a></li>
  <li class="menu133"><a href="/luc-trahan">About Luc</a></li>
  <li class="menu106"><a href="/home-listings">Listings</a></li>
  <li class="menu106"><a href="/home-buying">Buyers</a></li>
  <li class="menu106sub"><a href="/selling-your-home">Sellers</a>
    <ul id="select_sub">
      <li><a href="/#">21 Step Marketing Plan</a></li>
      <li><a href="/#">Selling Tips</a></li>
      <li><a href="/#">Home Staging</a></li>
      <li><a href="/#">Selling Values</a></li>
    </ul>
  </li>
  <li class="menu133"><a href="/our-communities">Barrie &amp; Area</a></li>
  <li class="menu106"><a href="/contact-luc-trahan">Contact Us</a></li>
</ul>

Also, you may notice in the code for my submenu I have contained it in a DIV. What would be the easiest way to remove the div and have all the same styling apply? Should I just do the above then try figuring out how to get the styling to apply to the #menu ul item?

<div class="select_sub">
	<ul class="sub">
	<li><a href="#">21 Step Marketing Plan</a></li>
    <li><a href="#">Selling Tips</a></li>
    <li><a href="#">Home Staging</a></li>
    <li><a href="#">Selling Values</a></li>
	</ul>

Thanks for your previous help btw!

6

Something like this?
Hi,
Yes, it looks like you have got the nested list set up correctly.

Also, you may notice in the code for my submenu I have contained it in a DIV. What would be the easiest way to remove the div and have all the same styling apply?
I just looked back at your page and the only rules you have on that div are the absolute positioning and display none.

You can do away with the display:none; as it is bad for usability anyway. It is better to hide the sublist off-screen with a negative margin. Anyway those rules can just be applied directly to the sub UL.

Have a look at this Simple Dropdown. If you view the page source you will see how li:hover ul sets the left margin back to “0” which reveals the dropdown.

7

Hi again, much thanks for the advice. This sent me on a long journey of rewriting and moving things around in my css code. I cleaned it up a whole bunch and am much happier now. I learned a lot along the way, but there is one last thing that I can’t figure out. Maybe its because I have spent days looking at this and my eyes don’t know the difference between right and wrong anymore.

Under the Sellers menu item there is a small arrow that points to the dropdown below. This is contained in the rollover for the Sellers menu item. When I move the mouse down to a submenu item, the little arrow disappears.

I tried changing the background image from being on a:hover to li:hover but didn’t see the difference.

Did I miss something simple for this one?
http://dustingrof.com/WSI-LucTrahan-Menu/source/index.html

8

Hi,

You need this rule.


[B].menu106sub:hover a[/B] {
    background: url(images/menu-106-mos.png) top left no-repeat;
}

You seemed to have missed the target with your existing rule which was:


.menu106sub [B]li:hover[/B] a {
    background: url(images/menu-106-mos.png) top left no-repeat;
}

.menusub106 is the list element itself.

9

Wow thanks! That made my life so much easier and I think I actually understand what I did wrong :smiley: