IE menu problem….

  • Hi,

    Need help pls, site (WordPress) running locally i’m afraid… works fine in FF but not ie6.

    Working

    Not working

    The header.php has this code

    <div id="page">

<div id="header" onclick="location.href='https://localhost/wordpress';" style="cursor: pointer;">
<div class="navlocation">
<ul id="nav">
	<li><a href="#">Who are we</a>
		<ul>
			<li><a href="https://localhost/wordpress/index.php/category/blog/">Steve's Blog</a></li>
			<li><a href="https://localhost/wordpress/index.php/category/news/">News</a></li>
			<li><a href="index.html">Item 3</a></li>
			<li><a href="index.html">Item 4</a></li>
		</ul>
	</li>

	<li><a href="#">What we do</a>
		<ul>
			<li><a href="index.html">Item 1</a></li>
			<li><a href="index.html">Item 2</a></li>
			<li><a href="index.html">Item 3</a></li>
			<li><a href="index.html">Item 4</a></li>
			<li><a href="index.html">Item 5</a></li>
		</ul>
	</li>
	<li><a href="https://localhost/wordpress/index.php/search/">Search</a>
	</li>
	<!-- etc. -->
</ul>
</div>
	<div id="headerimg">
	</div>

</div>

    And the css has this

    .navlocation {
	top: 42px;
	left: 575px;
	position: relative;
	z-index: 2;
}
#page {
	width: 920px;
	margin: 0 auto;

}

#header {
	background-image: url(images/Headerfinal.jpg);
}

#headerimg {
	height: 145px;	

}
#nav, #nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-color: #FFFFFF;
}

#nav a {
	display: block;
	width: 9em;
	color: #000000;
	margin-left: 5px;
	margin-top: 1px;
	margin-bottom: 3px;

}

#nav li {
	float: left;
	width: 9em;
	margin-top: 5px;
	list-style-type: none;
}
#nav li ul {
	position: absolute;
	width: 9em;
	left: -999em;
	list-style-type: none;
}

#nav li:hover ul {
	left: auto;
	list-style-type: none;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	list-style-type: none;
}
#nav li:hover {
	background-color: #F7F7F7;

}

    I’m more than happy to use a conditional statement to give ie a seperate css file, but i just can’t get the actual menu to move. Tried position relative and fixed for navlocation. Nada. Set it to absolute and it moves but obviously then isn’t in the right place as window changes size.

    Should say in that position under ie, menu doesn’t work. Move it with absolute and it does work.

    Any help please would be great!!!

    Thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)

  • Well, #1, you shouldn’t post so much code in your post. With that much code, you should use pastebin.

    #2, I don’t know what the issue is, but I’m *guessing* that in IE, the dropdowns won’t dropdown when they’re supposed to.

    That’s because of this:

    #nav li:hover ul {
	left: auto;
	list-style-type: none;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	list-style-type: none;
}
#nav li:hover {
	background-color: #F7F7F7;

}

    IE does NOT recognize :hover on anything but anchor links. You have to use javascript to force IE to recognize the hover state on LI elements.

    visit the Son of Suckerfish site – they have the necessary code you need there.

    Thread Starter yeleek

    (@yeleek)

    I’ve got javascript for the floats + ie. Hence how that works…

    Set the navlocation in iestyle.css to float right and its worked…… don’t understand that… or if its ok to leave it like that.

    Re pastebin – noted.

    Thanks for the reply

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘IE menu problem….’ is closed to new replies.

Tags