Jump to content


Photo

new menu feedback wanted


  • Please log in to reply
17 replies to this topic

#1 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 14 February 2008 - 10:28 AM

Hi all, im trying to implement a new menu to replace the current one. The current one is a lot of javascript. Thats both good and bad. Good in that it works basically on everything. Bad in that it's a huge download for something as simple as a menu.

I want to replace this with a HTML/CSS based menu. Those of you that work with these things regularly know that it's a nightmare to get that to work cross-browser and cross-OS. Ive got a first try running now, that seems to work on quite a few browsers. But I dont have the ability to test it on everything you all have on your computers.

Please have a look at this link: http://wetpixel.com/i.php/menu (check the line starting with 'News Articles..').

Let us know in this thread if it works or doesnt work for you. Please give your browser version and operating system version. (ie: Windows XP, Firefox 2.0.0.12, or OSX 10.4.11, Safari 2.1). I already know it doesnt quite work right in Safari 1.x.

Also, if you are a CSS wizard that can help us out perfecting this, let us know as well!

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#2 bartusderidder

bartusderidder

    Wolf Eel

  • Member
  • PipPip
  • 181 posts
  • Gender:Male
  • Location:Belgium

Posted 14 February 2008 - 10:39 AM

Hi Cor,

Seems to work here :D

Windows XP (Media Center Edition)
IE 7.0

#3 TheRealDrew

TheRealDrew

    Humpback Whale

  • Moderator
  • 2855 posts

Posted 14 February 2008 - 10:46 AM

Hi all, im trying to implement a new menu to replace the current one. The current one is a lot of javascript. Thats both good and bad. Good in that it works basically on everything. Bad in that it's a huge download for something as simple as a menu.

I want to replace this with a HTML/CSS based menu. Those of you that work with these things regularly know that it's a nightmare to get that to work cross-browser and cross-OS. Ive got a first try running now, that seems to work on quite a few browsers. But I dont have the ability to test it on everything you all have on your computers.

Please have a look at this link: http://wetpixel.com/i.php/menu (check the line starting with 'News Articles..').

Let us know in this thread if it works or doesnt work for you. Please give your browser version and operating system version. (ie: Windows XP, Firefox 2.0.0.12, or OSX 10.4.11, Safari 2.1). I already know it doesnt quite work right in Safari 1.x.

Also, if you are a CSS wizard that can help us out perfecting this, let us know as well!

Cor


Firefox 1.5.0.12 and Safari 2.03 OS 10.4.5 on this Mac (have other combos if you need...)

#4 herbko

herbko

    Herbzilla

  • Super Mod
  • 2128 posts
  • Gender:Male
  • Location:Northern California

Posted 14 February 2008 - 11:13 AM

I'm using Win XP home.

It works on Firefox 2.0.0.12 and Opera 9.25 but not on the old IE 6.0
Herb Ko http://herbko.net
Canon 5D; Aquatica housing; 2 Inon Z220 strobes; Canon 100mm macro, 17-40mm ; Sigma 15mm FE, 24mm macro, 50mm macro

#5 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 14 February 2008 - 11:15 AM

Drew, you mean they work with those? Or dont work?

Ah darn, it is supposed to work on IE6. I dont have IE6 here. Im sending you a privmsg Herb.

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#6 Giles

Giles

    International Supermodel

  • Moderator
  • 2618 posts
  • Gender:Male
  • Location:Cayman Islands
  • Interests:water and sun my friend, thats what turns me on.

Posted 14 February 2008 - 11:23 AM

I seem to have it working fine on

Windows 2000 Pro & Windows XP
Flock 1.0.8
Firefox 2.0.012
IE 7
Opera 9.24 + 9.25

However .. IE6 appears to not change the background colour on hover making the white text hard to see.

ps .. i like the slight overlap of the sub-lists
me on the web >> journal / flickr / portfolio
i use >> my camera, eye & stunning good looks

#7 TheRealDrew

TheRealDrew

    Humpback Whale

  • Moderator
  • 2855 posts

Posted 14 February 2008 - 12:16 PM

Drew, you mean they work with those? Or dont work?

Ah darn, it is supposed to work on IE6. I dont have IE6 here. Im sending you a privmsg Herb.

Cor





Sorry about that, it works oh those. Did not look at the Tags but IE has some things where you may need a kludge or two. Do not recall which tags off the top of my head right now I can try to find it again if you want.

#8 Deep6

Deep6

    Great Hammerhead

  • Member
  • PipPipPipPip
  • 881 posts
  • Gender:Male
  • Location:Broomfield, CO

Posted 14 February 2008 - 01:22 PM

A quick kicking of the tires with IE 6.0 & W 2K seems OK. I will check it out with XP SP2 & Vista when I get to my home 20.

Carpe carp - Seize the carp


#9 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 14 February 2008 - 01:34 PM

I made a slight change for IE5/6 so maybe thats why it works now for Deep6. Giles, is it working for you? Herb? This should not affect the color change on hover though. If it does, let me know :D

Im downloading a VMware image that supposedly has an IE6 setup. That should help in testing that myself.

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#10 herbko

herbko

    Herbzilla

  • Super Mod
  • 2128 posts
  • Gender:Male
  • Location:Northern California

Posted 14 February 2008 - 02:22 PM

It's usable but hover color is still white and makes it hard to read against the light blue. An even worst problem is the sub menus are not offset enough from the main drop down which makes selecting the next item on the main drop down difficult. You have to put the cursor almost against the left edge to be off the sub menu.

I made a slight change for IE5/6 so maybe thats why it works now for Deep6. Giles, is it working for you? Herb? This should not affect the color change on hover though. If it does, let me know :D

Im downloading a VMware image that supposedly has an IE6 setup. That should help in testing that myself.

Cor


Herb Ko http://herbko.net
Canon 5D; Aquatica housing; 2 Inon Z220 strobes; Canon 100mm macro, 17-40mm ; Sigma 15mm FE, 24mm macro, 50mm macro

#11 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 15 February 2008 - 02:49 PM

Hi all, ive done a few changes. Things seem a little better now. I tested with IE 5.01 and IE 5.5 and they work relatively ok. Herb? Do you still get the menu overlap problem? I cant reproduce that anymore. Also, the hover is working a little better now, but not as nice as IE7 or Firefox. I can only get it to color change on the <a> instead of the <li> as it's supposed to do.

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#12 Giles

Giles

    International Supermodel

  • Moderator
  • 2618 posts
  • Gender:Male
  • Location:Cayman Islands
  • Interests:water and sun my friend, thats what turns me on.

Posted 15 February 2008 - 03:35 PM

Cor I just had the same problem ... but i think it should work on the li ... no longer have IE6 to test .. at home now .. will check at the office tomorrow.

a site i just made has the hover background changing on hover wih <li> using the following css
#tabs li {
	  }
	#tabs a {
	  background:url("images/tableft.gif") no-repeat left top;
	  text-decoration:none;
	  }
	#tabs a span {
	  background:url("images/tabright.gif") no-repeat right top;
	  color:#666;
	  }
	/* Commented Backslash Hack hides rule from IE5-Mac \*/
	#tabs a span {float:none;}
	/* End IE5-Mac hack */
	#tabs a:hover span {
	  color:#FFF;
	  }
	#tabs a:hover {
	  background-position:0% -42px;
	  }
	#tabs a:hover span {
	  background-position:100% -42px;
	  }
i took out any irrelevant stuff

and heres the html
<div id="nav">
	<div id="tabs">
  <ul>
	<li><a href="main.php" title="Nautilus Home"><span>Home</span></a></li>
	<li><a href="tours.php" title="Nautilus Tours"><span>Tours</span></a></li>
	<li><a href="video.php" title="See our Video"><span>Video</span></a></li>
	<li><a href="contact.php" title="Contact Nautilus"><span>Contact</span></a></li>
  </ul>
</div></div>

that works fine for the hover for me in IE 6 probably 5 but havent tested .. granted its background image .. but bg colour should work too ?

just incase that helps. you probably know way more than me on this stuff anyway ... thats just something i did recently that worked.
me on the web >> journal / flickr / portfolio
i use >> my camera, eye & stunning good looks

#13 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 15 February 2008 - 03:53 PM

Which problem do you have? There's a few being mentioned. Im losing track of whats working and what isnt :blush: In IE 5 and 5.5 it works somewhat ok for me now. Not 100%, but workable. I dont have IE 6 yet.

I think the CSS/HTML you posted is missing some key elements. There is no hover being done in that piece of css. Hover works like this:

li:hover {background-color: #aaa; }
a:hover {background-color: #aaa; }

The bit you posted just drops an image over all A and SPAN elements.

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#14 Giles

Giles

    International Supermodel

  • Moderator
  • 2618 posts
  • Gender:Male
  • Location:Cayman Islands
  • Interests:water and sun my friend, thats what turns me on.

Posted 15 February 2008 - 04:44 PM

whoops sorry .. i deleted what i meant to post !!

put it in now ... i was adding to what I previously said about how in IE6 at least the other day (and someone else mentioned this too) when you hover the background colour does not change ... but the text colour on hover goes to white ... this makes the text really hard to read on hover .. in IE6.

I didn't see that you had fixed it, and i can't test it, so I thought i would post something i used that seemed to work.

PS also the overlap was never a problem for me on any of the tested versions i mentioned above.
me on the web >> journal / flickr / portfolio
i use >> my camera, eye & stunning good looks

#15 cor

cor

    The Hacker

  • Admin
  • 1993 posts
  • Gender:Male
  • Location:Amsterdam, Netherlands

Posted 15 February 2008 - 05:03 PM

Hi Giles, yeah..i fix^H^H^Hchanged some stuff :blush: But it's not perfect yet. Im testing on another site, and there im almost there with a tiny bit of javascript.

The CSS you changed still does not do a li:hover. IE before version 7 does not know about anything but a:hover (which your code does). The problem is that the A element does not fill the whole LI element in the wetpixel menu, so thats why not the whole menu line changes color but only the A bit inside it. (once you see it you'll immediately see what I mean).

I have some JS now (will add it tomorrow) that changes all li:hover elements in IE below 7 into li.hover (a css class named hover). Then you can select on li.hover {background: #aaa; } and that seems to work. A tiny bit of JS is still better than 30K of it :)

There are thousands of webpages dedicated to fixing dropdown/flyout menus in IE. Its a nightmare :)

Cor
Cor Bosman - Nikon D2X Subal ND2 - Nikon D7000 Subal ND7000
website | tripreports/journal | facebook | wetpixel map | twitter


#16 Deep6

Deep6

    Great Hammerhead

  • Member
  • PipPipPipPip
  • 881 posts
  • Gender:Male
  • Location:Broomfield, CO

Posted 18 February 2008 - 07:59 PM

Windows XP Pro w. SP2 - IE 7.0.x Looks good! Have not tried the Vista monster yet.

Carpe carp - Seize the carp


#17 echeng

echeng

    The Blue

  • Admin
  • 5842 posts
  • Gender:Male
  • Location:San Francisco, CA
  • Interests:photography, ice cream, cello, chamber music, quadcopters

Posted 19 February 2008 - 01:58 AM

THANK YOU, Cor. CSS browser compatibility is always a moving target...
eric cheng
publisher/editor, wetpixel
www | journal | photos


#18 Craig Ruaux

Craig Ruaux

    Great Hammerhead

  • Member
  • PipPipPipPip
  • 788 posts
  • Gender:Male
  • Location:Oregon, USA

Posted 19 February 2008 - 10:44 AM

Mac OS 10.4.11

Firefox 2.0.0.12: All seems to work well

Opera 9.25: Most recent version works OK. Version of Opera previous to this one, the submenus are overlapped by the highlighting, rather than vice versa.

Safari 3.0.4: All seems to work well

Camino 1.0.2: All seems to work well

IE: Shall not sully my machine, sorry.

Edited by Craig Ruaux, 19 February 2008 - 10:45 AM.

Why would I take a perfectly good camera underwater??
D300, D200, D70, 12-24 f4 AFS DX, 60mm f2.8, 70-200 f2.8 AF-S VR, 105 f2.8 AF-S VR, Tokina Wunderlens.

Photo galleries @ Ruaux.net