Resolved test this menu please [Archive]

View Full Version : Resolved test this menu please

bluewalrus

01-04-2009, 07:26 PM

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

01-04-2009, 08:45 PM

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

01-04-2009, 08:46 PM

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 (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 (https://addons.mozilla.org/en-US/firefox/addon/1419)

bluewalrus

01-04-2009, 09:28 PM

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

01-04-2009, 09:39 PM

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/ (http://www.tuaw.com/2007/11/30/run-ie-on-your-intel-mac-if-you-absolutely-have-to/)

bluewalrus

01-04-2009, 11:04 PM

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).

Snookerman

01-05-2009, 11:17 AM

You have to add style tags as well:

Snookerman

01-05-2009, 11:28 AM

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


<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>


Try this instead:


<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>

That will work in IE.

bluewalrus

01-05-2009, 02:30 PM

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/mywifetakesme/test/food/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

01-05-2009, 02:57 PM

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:
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:



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

Good luck!

bluewalrus

01-06-2009, 03:11 AM

Well dang... So this is working on your comp in ie... http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/american.html because on mine now the drop down(-out? haha) menu isn't working. Maybe i should use the conditional in the HTML as well for the 2 different menus?

Also have you used <base href="site">? This way you don't have to go threw and change all links it does it for you.

Nile

01-06-2009, 03:15 AM

For me, it works in IE only.
And it doesn't completely work - it still shows a few pixels off. As Snookerman said in his first post.

bluewalrus

01-06-2009, 03:50 AM

from the left or top or both?

Nile

01-06-2009, 04:05 AM

It sets about 6 pixels from the top lower than the nav "Travel Gear."
I'm sorry - Snookerman did not say it.

bluewalrus

01-06-2009, 04:25 AM

OO thanks for pointing that out I forgot about adding in the id's for the different menu's in the conditional statement (hopefully this works and wasn't what was messing it up) so they don't line up at the same point.

Nile

01-06-2009, 04:27 AM

Ok, glad to help. If what your thinking of doesn't work post back saying it didn't work.. If it does post back saying it did work. :D

bluewalrus

01-06-2009, 04:52 AM

hah I have no idea either way. I'm basically coding blind I have no way to test ie7 and that's the only place this is working so far.
EDIT...
Actually I just fixed a majority of my last post problem and the one I just took out because I found this error after so now I think it should be working in all browsers but maybe postioning off in IE a bit still

So if anyone could give it a test again I'd appreciate it thanks. Any screen shots would be extra helpful.

Snookerman

01-06-2009, 09:41 AM

Which of the pages do you want to be tested?

bluewalrus

01-06-2009, 01:42 PM

oo yea forgot that part sorry. this one please http://www.mywifetakesmeplaces.com/mywifetakesme/test/food/american.html

I'm just gonna copy it over once it's working to all the other pages.

Snookerman

01-06-2009, 02:27 PM

I'm posting a Fx3 screeshot as well so you can see the difference better:
24052406

As you can see there is a small difference in placement, that is because you used left: 115px; in your conditional statement, instead of 120px like I suggested. Change it to 120px and it should be fine.

Good luck!

bluewalrus

01-07-2009, 04:44 AM

Okay thanks. I think it should be all set now. I copied it over to all the pages as well. If anyone does see a flaw with it please let me know thanks.

Nile

01-07-2009, 05:02 AM

Chrome & Firefox & IE & Opera:
http://localhostr.com/files/962f84/capture.png
Safari:
Good

bluewalrus

01-07-2009, 05:23 AM

Thanks. Do you think there's something wrong with it in that picture, or were you just showing me it too me, I saw the good only noted for Safari.

Snookerman

01-07-2009, 10:50 AM

It looks exactly the same in all browsers now (Fx3, IE8, IE7, Op9.63, Chrome). I don't have Safari but you have a Mac so you should be able to test it yourself, if it looks like Fx3 then it's all good.

Nile

01-07-2009, 12:57 PM

Yeah- the Safari is the only good one. Although it looks like FireFox is 2 pixels off IE is 3, Chrome is 2, but its all the same.. Try adjusting it 3 pixels/2 pixels.

bluewalrus

01-07-2009, 02:22 PM

Okay thanks i adjust it 3 and it looks good in all the browser i tested it in (firefox 2, flock, safari 3, opera 9.5).

Nile

01-07-2009, 10:30 PM

1 pixel off now. :D
I mean make it 1 px higher.

bluewalrus

01-08-2009, 05:02 AM

Okay which one should be one pixel higher both menus (food,gear) in all browsers or just ie or just the other?

Nile

01-08-2009, 12:57 PM

Every menu should be 2 px higher in every browser but Safari.

bluewalrus

01-10-2009, 05:13 AM

Forgot I still had this open. I think it should be all set now. Thanks.