test this menu please

[bluewalrus]

Can someone test this menu for me http://www.mywifetakesmeplaces.com/mywifetakesme/test/ if you mouseover travel gear it should pop out to the right with 3 other links in any size window. It seems to be working on all browsers I've tested (firefox, safari, flock, opera). Although I know the big flaw will probably be IE....

[magicyte]

It just so happens to work in IE7, but the position of the menu which pops up is to the right in the center of the page. Screen shot: http://localhostr.com/files/116911/the%20problem.png

-magicyte

[Snookerman]

Works in Fx3, Op9.6, Chrome. In these the submenu is a few pixels lower down than the menu.

Works in IE8 but the submenu is shifted even lower down causing some problems when trying to hover over it.

In IE7 the submenu is shifted about 100px to the right, crating a gap which makes it impossible to hover over.

Doesn't work in IE6 or lower.

Here is a good tool to use when coding:
http://www.my-debugbar.com/wiki/IETester/HomePage

You can also use the IE tab add-on for Fx:
https://addons.mozilla.org/en-US/firefox/addon/1419

[bluewalrus]

Dang both of those tools looked promising then when I read requirements you must be running windows, seems like everyone's making apps for windows where the ie is already usable i wish someone would make one for the macs where it's back at ie 5.2 and pointless to test in.

Do you think using something other than pixels would fix the positioning?

[Snookerman]

Have you tried this one, it seems to work up to IE7:
http://www.tuaw.com/2007/11/30/run-ie-on-your-intel-mac-if-you-absolutely-have-to/

[bluewalrus]

Yea that worked for 6. Thanks. I couldn't get the 7 to work or that menu it shows to switch it at install it just says something like install internet explorer 6 wine and something required then there are two options install and log.

EDIT:
I just tried making this conditional statement at the end of the head of my index page can someone let me know of this works (or is formatted incorrectly).

<!--[if IE 7]>
ul li:hover ul {
position:absolute;
left:60px;
top:235px;
padding:0;
list-style-type:none;
display:block;
visibility:visible;
width: 160px;
background-color: #E6F3FF;
}
<![endif]-->

[Snookerman]

You have to add style tags as well:

<!--[if IE 7]>
<style type="text/css">
ul li:hover ul {
position:absolute;
left:60px;
top:235px;
padding:0;
list-style-type:none;
display:block;
visibility:visible;
width: 160px;
background-color: #E6F3FF;
}
</style>
<![endif]-->

[Snookerman]

I just tested it in IE and it was all broken because of your code:

<!--navigation begin-->
<div id="navigation">
<ul id="nav">
<li><a href="http://www.mywifetakesmeplaces.com/">Home</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/travel/">Travel Links</a></li>
<div id="travelsub">
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/">Travel Gear</a>
<ul>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/sun.html">Sun Protection</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/hat.html">Hats and Specialty Gear</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/packing.html">General Packing Tips</a></li>
</ul>
</li></div>

<div id="foodsub">
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Food</a>
<ul>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Delicious/Good Things We’ve Eaten</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Italy</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Weird/Bad Things We’ve Eaten</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">American Regional Specialties</a></li>
</ul>
</li></div>

<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/rewind/">Where We've Been</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/favcity/">Favorites</a></li>
<li><a href="">Local Trips</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/tips/">Budget Tips</a></li>
<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/about/">About Us</a></li>
<li><a href="mailto:vito@mywifetakesmeplaces.com">Contact Us</a></li>
</ul>
</div>

<!--navigation end-->

Try this instead:

<!--navigation begin-->
<div id="navigation">
<ul id="nav">
	<li><a href="http://www.mywifetakesmeplaces.com/">Home</a></li>
	<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/travel/">Travel Links</a></li>
	<li id="travelsub"><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/">Travel Gear</a>
		<ul>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/sun.html">Sun Protection</a></li>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/hat.html">Hats and Specialty Gear</a></li>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/gear/packing.html">General Packing Tips</a></li>
		</ul>
	</li>
	<li id="foodsub"><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Food</a>
		<ul>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Delicious/Good Things We’ve Eaten</a></li>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Italy</a></li>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">Weird/Bad Things We’ve Eaten</a></li>
			<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/">American Regional Specialties</a></li>
		</ul>
	</li>
	<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/rewind/">Where We've Been</a></li>
	<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/favcity/">Favorites</a></li>
	<li><a href="#">Local Trips</a></li>
	<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/tips/">Budget Tips</a></li>
	<li><a href="http://www.mywifetakesmeplaces.com/mywifetakesme/test/about/">About Us</a></li>
	<li><a href="mailto:vito@mywifetakesmeplaces.com">Contact Us</a></li>
</ul>
</div>
<!--navigation end-->

That will work in IE.

[bluewalrus]

Oo okay thanks, I've added that as this (to keep the links relative to the directories I didnt paste it exactley but think i got it the same...) or did i need the absolute link for IE?. I've gone threw it a few times now and it looks like I've closed everything and opened it as you have it but it's not working on flock now. You can view it here... http://www.mywifetakesmeplaces.com/m.../american.html
Is it working on ie now?

If I missed something and this one thing was the problem is the conditional statement still working here as well or is that unnecessary now?

This page also has the old nav with the newer conditional statement...
http://www.mywifetakesmeplaces.com/mywifetakesme/test/

<div id="navigation">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="travel/">Travel Links</a></li>
<li id="travelsub"><a href="gear/">Travel Gear</a>
<ul>
<li><a href="gear/sun.html">Sun Protection</a></li>
<li><a href="gear/hat.html">Hats and Specialty Gear</a></li>
<li><a href="gear/packing.html">General Packing Tips</a></li>
</ul>
</li>
<li id="foodsub"><a href="food/">Food</a>
<ul>
<li><a href="food/">Delicious/Good Things We’ve Eaten</a></li>
<li><a href="food/">Italy</a></li>
<li><a href="food/">Weird/Bad Things We’ve Eaten</a></li>
<li><a href="food/">American Regional Specialties</a></li>
</ul>
</li>
<li><a href="rewind/">Where We've Been</a></li>
<li><a href="favcity/">Favorites</a></li>
<li><a href="">Local Trips</a></li>
<li><a href="tips/">Budget Tips</a></li>
<li><a href="about/">About Us</a></li>
<li><a href="mailto:vito@mywifetakesmeplaces.com">Contact Us</a></li>
</ul>
</div>

[Snookerman]

Sorry about the absolute links, that was done automatically when I saved your page and I forgot to remove them. It works better in IE7 now:
Attachment 2403
As you can see the submenu is just a bit too much to the left, you can fix this by increasing the 60px left margin in the conditional statement, 120px works great:

<!--[if IE 7]>
<style type="text/css">
ul li:hover ul {
position:absolute;
left:120px;
top:235px;
padding:0;
list-style-type:none;
display:block;
visibility:visible;
width: 160px;
background-color: #E6F3FF;
}
</style>
<![endif]-->

The page with the old nav has the same problem with the opening and closing the lists:
Attachment 2404
Using the code I posted before (without the absolute links of course) should fix this.

Good luck!