I'm just starting fleshing out a site, here's the address: http://bit.ly/1VFCG0.

I've written a drop down menu from scratch, where the positioning works well in webkit, gecko and presto, but not trident. (Story of my life!)

Any ideas why?

nav ul {
    list-style-type:none;
    padding-bottom:0.4em;
    padding-top:0.4em;  
}

nav ul li {
    display:inline;
    text-align:left;
    vertical-align:middle;
}

nav ul li a {
    color:#9e9e9e;
    font-style:normal;
    outline:none;
    padding:1em;
    text-decoration:none;
}

nav ul li a:hover,nav ul li a:focus {
    color:#333;
}

    nav ul li ul {
        background: url(/media/img/white_0.9_pixel.png);
        background: rgba(255, 255, 255, 0.9);
        visibility: hidden;  
            /* This is the bit that I'm guessing doesn't work on IE. */
        position: absolute;
        left:260px;
        top:10px;
    }

    nav li ul li {
        float: none;
        display: inline;
    }

    nav li ul li a {
        padding:0;
        padding-bottom:5px;
        padding-top:5px;    
        width: auto;
        display:block;
    }

14 answers

tommed 46
1
point
This was chosen as the best answer

So, I have taken a look. It appears that one of those Google scripts you have at the top is doing clever things with IE, as the "nav" tag is completely ignored without it. "nav" is an HTML4 thing, so let's strip back to the basics and get this working first!

Here is the HTML that should work on all browsers (except, possibly for IE6):

 #nav {
    list-style-type:none;
    padding-bottom:0.4em;
    padding-top:0.4em;  
  }

#nav>li {

  display:inline;
  text-align:left;
  vertical-align:middle;
  position: relative;

}

#nav>li a {

  color:#9e9e9e;
  font-style:normal;
  outline:none;
  padding:1em;
  text-decoration:none;

}

#nav>li:hover ul {

visibility: visible;

}

#nav li a:hover,nav ul li a:focus {

  color:#333;

}

 #nav li ul {
      background: url(http://new.thefinaltouch.co.uk/media/img/white_0.9_pixel.png);
      background: rgba(255, 255, 255, 0.9);
      visibility: hidden; /* This is the bit that I'm guessing doesn't work on IE. */
      position: absolute;
      left:-25px;/*align the text in top menu*/
      top:18px;
      width: 200px;
  }

 #nav li ul li {
      float: none;
      display: inline;
  }

 #nav li ul li a {
      padding:0;
      padding-bottom:5px;
      padding-top:5px;    
      width: auto;
      display:block;
  }

As you can see, I've replaced the "nav" selector in CSS with #nav (so instead of pointing to the nav element I am pointing to the ul element with the id of "nav"). The only reason using nav works for you at the moment is because of the Google hackery-scripts, which adds an element on unknown to it all.

The reason it won't work in IE6 is because it generally doesn't understand #nav>li. (Which means all li elements directly underneath an element with the id of #nav). To fix it to work with IE, you will need to give each top-level li a css-class name and replace the css declaration "#nav>li" with ".class_name_here"

IE = alt text WebKit = alt text

Here is my workings page: http://dl.getdropbox.com/u/577250/doctype.com/test.htm

Answered over 7 years ago by tommed
1
point

You are using position:absolute without its parent element being position:relative. This might have something to do with it?

Answered over 7 years ago by Shaun Robinson
tommed 46
1
point

I think Shaun is spot-on. When using "position:absolute" all browsers search for a "positioning"-parent (an element which has it's position defined).

You said that you set the positioning on the "li" element in your CSS update.. are you sure this is the element you want to reset positioning for?

Have a think about what you want to achieve, but I think setting "position:relative" on either "nav" or "nav ul" might achieve what you want?

Otherwise if you want to send the CSS and HTML, I/we can give you a better idea as what is going wrong.

Answered over 7 years ago by tommed
1
point

I'd use Son of Suckerfish Dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/

If you don't want to reinvent the wheel, at least take a look at their approach to see how it can be done, and done well at that.

Answered over 7 years ago by Matt Sephton
Alex Holt 341
1
point

another thing to look into is ie7.js http://code.google.com/p/ie7-js/

It uses Javascript to try and upgrade the layout and box model in IE to a more standards compliant compatibility...

Answered over 7 years ago by Alex Holt
0
points

I've changed it to:

nav ul li {
    position:relative;      
}

nav ul li ul {
    background: url(/media/img/white_0.9_pixel.png);
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    visibility: hidden;
    left:0;
    top:1em;
}

Which makes it look better, but still not quite. Still slightly different in IE - seems that IE aligns the menu from the top of the parent whereas everything else aligns from the bottom. Is this just what IE does here?

Answered over 7 years ago by Rich Bradshaw
0
points

Thanks for your answer.

I'm looking at a menu like this:

<nav>
    <ul id="nav">
        <li><a href="/">Home</a></li>
        <li><a href="#">Services</a>
            <ul>

                <li><a href="#">House Doctor</a></li>
                <li><a href="#">Renovate &amp; Refurbish</a></li>
                <li><a href="#">Interior Design</a></li>
                <li><a href="#">Show Homes</a></li>
                <li><a href="#">Curtains &amp; Soft furnishings</a></li>

                <li><a href="#">Boat Interiors</a></li>
                <li><a href="#">Estate Agents</a></li>
                <li><a href="#">Property Developers</a></li>
            </ul>
        </li>
        <li><a href="#">Press</a></li>
        <li><a href="#">Case Studies</a></li>

        <li><a href="#">Testimonials</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

With the CSS above. (The link in the OP is to a live version as I'm changing things)

I've set position:relative on nav ul and nav but it didn't quite fix it - the dropdown was then aligned with the nav or the nav ul - really it needs to be inline with the nav ul li that is clicked on.

I've always stayed clear of dropdowns because they just seem so complex. :(

Answered over 7 years ago by Rich Bradshaw
tommed 46
0
points

Yeh, just looking at the html; it sounds like "nav ul li" was what you wanted after all.

If you do a search on msdn.microsoft.com, there is a tool called IE dev toolbar. This allows you to change html and CSS on the page in real-time. It's certainly well worth installing for IE development.

I'll take a look at your code at lunchtime and let you know! Probably just one or two more css properties need setting... it is very close! :)

Answered over 7 years ago by tommed
0
points

I haven't used IE Dev, that sounds good though - usually use a combo of Firebug and Safari's inspector. Thanks for your help!

Answered over 7 years ago by Rich Bradshaw
0
points

That looks fantastic - I'll have a go at implementing that.

Thanks for your help - I've never really done anything with absolute or relative positioning, I've somehow managed to get by just using inline, blocks and floats.

The nav element is from HTML5 - the js I've linked from google code just writes the elements into the DOM - for some reason IE won't style them unless you do that first.

Thanks again - this site looks like it could be pretty good. Hopefully it gets as wide a userbase as stackoverflow...

Answered over 7 years ago by Rich Bradshaw
tommed 46
0
points

Yeh IE won't put the nav element into the DOM as it is not recognised (which is incorrect behaviour, it should simply treat it like a generic html element like all the other browsers do!)

If you haven't worked with absolute positioning before, I'll share a gotcha with you... If you have a absolutely positioned div with a high z-index, and it appears above a "select" tag, in IE6, the select tag will bleed through the div. It's probably the second most annoying issue with IE6 (second to the incorrect box model implementation).

You have to either put an iframe underneath the div tag and position it the same way OR hide all "select" tags when showing the div. Yukky eh?!!

... and don't even get me started on z-indexes in IE browsers..! ;)

Yeh site looks pretty cool.. I think having a more narrowed-topic scope than Stack Overflow will mean it probably survive (rather than if it competed with it directly as a generic Q&A site).

This WYSIWYG editor is extremely annoying though! (Just look at the CSS code I pasted earlier... what a mess!) Early days yet though! :)

Answered over 7 years ago by tommed
0
points

You have to either put an iframe underneath the div tag and position it the same way OR hide all "select" tags when showing the div. Yukky eh?!!

Crikey that's horrible!

Not sure on my feelings about still supporting IE6. As a small part time designer it just doesn't seem to make sense for issues that take too long to fix.

I've had the same problem with CSS on stackoverflow, it seems that starting with a # means a header, so it messes it all up. Sometimes indenting everything by 8 instead of 4 spaces seems to fix it.

I've added your css to my site, but my VM with Windows in seems to have died, so I can't check if it's right in IE so I'll fire up my old laptop to sort out any issues. Thanks again!

Answered over 7 years ago by Rich Bradshaw
Alex Holt 341
0
points

-- double post -- again.. my mouse is being funny :(

Answered over 7 years ago by Alex Holt
-1
points

It's useful to reinvent the wheel if you want to learn about wheels.

Answered over 7 years ago by Rich Bradshaw