CSS Dropdown Menu Misaligned in IE8

Question

Hi all,

I have some drop down menus that don't seem to be aligning nicely in IE8 - they are aligning well in Firefox 3 and IE7. Specifically, the dropdowns seem to be ignoring my right:0; style. A picture says a thousand words so this is what it looks like:

As you can see, the right side of the dropdown should be aligning with the right side of the highlighted "admin" li but it appears to be in the middle.

The important dropdown css styles are:

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
}

The important "admin" li styles are:

.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}

And the HTML for that bit is:

<li class="normal ajs-menu-item">
<a href="#" class="user trigger ajs-menu-title" id="user-menu-link"><span><span>admin</span></span></a>         
<div class="ajs-drop-down" style="width: 111px;">
<ul class="section-user-status first" id="user-menu-link-user-status">
... bunch of <li>s               
</ul>
</div>
</li>

If anyone could shed some light that would be great, just driving me a bit nuts :(.

Thanks in advance!!!!

Cheers, Jenny

Answer 1

I would recommend a separate stylesheet for IE8 aimed specifically at the menu. This is the only way to make changes for IE8 and not the other browsers that display fine.

The code below probably isn't exact (with regard to singling out a browser), but it should give you an idea what to do...

<![If lt IE7]>
    <link href="ie8.css" type="text/css" rel="stylesheet" />
<![End If]-->

Once you've done that, copy the css for your menu into this file (as is) and change the margins for the drop down:

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
margin-right: 40px !important;
}

If changing the right margin as shown here doesn't work, try setting the left margin to a negative value. I know, the idea seems ludicrous, but in my research into Liquid Design, I've found that it's sometimes the ONLY way to get something right.

HTH