IE alignment problem – Sandbox based WordPress Theme

[reverend]

Hi all,

I have a bit of a problem. I have built a wordpress based theme, based on Sandbox, however the menu navigation is a little off. I am not sure why. Maybe one of you coud point me in the right direction. Thank you very much.

Common Menu styles:

Code:

/* @group Menu */

div#menu {
height: 30px; margin: 1em 0; width: 100%; background: #fda200 none no-repeat left bottom; border-top: 2px solid #970200; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px;}

div#menu ul {
padding: 0 2em;}

div#menu ul,div#menu ul ul {
line-height: 1; list-style: none; margin: 0; padding: 8px 0 0 0;}

div#menu ul a {
display: inline; margin: 0 0.25em 0 0.25em; padding: 0.2em 0.3em; text-decoration: none; color: #360f08; font-size: 1em;}

div#menu ul a:hover {
color: #970200;}

div#menu ul ul ul a {
font-style: italic;}

#menu ul li ul li a {
color: #360f08; margin-top: 15px;}

/* My Comment */

div#menu ul li ul {
left: -999px; position: absolute;}

div#menu ul li:hover ul {
margin: 0; padding: 0.6em 0; left: auto; background: transparent url(images/sub-nav.png) no-repeat left top; line-height: 2em;}

div#menu ul li:hover ul li {
margin: 0; line-height: 2.5em;}

div#menu ul li:hover ul li:last-child {
}

/* @end */

IE styles so far:

Code:

div#menu ul li:hover ul {margin:0; padding: 0.6em 0;}

[reverend]

I am a little stumped here, not a single idea? I’d greatly appreciate it.

[Dominic]

I’m not familiar with sandbox and without seeing your HTML I can’t help much…

I have had problems with IE not liking position:absolute unless a position for both x and y axis are declared. eg, left:999px; you need to also use top:0;

Other thing with position absolute in IE, is it seems to take it’s position value (top, left, right etc) from inside the padding of the element it’s getting its position from. So if you have padding of 10px on the relatively position div, the absolutley positioned div inside it might be 10px out in IE.
Wouldn’t hurt to set padding and margins to 0, just to see if you get a consistency between browsers.

post a link to your HTML and I might have better advice for you.

[reverend]

Hello Dominic,

Thank you very much for your reply. I am trying that out this morning, but I thought I post the URL to the dev site in the meantime.

URL: http://bit.ly/Xc02c

Thanks for taking a look.

[Author]

Posts