17 replies to this topic

[cor]

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

[bartusderidder]

Hi Cor,

Seems to work here

Windows XP (Media Center Edition)
IE 7.0

[TheRealDrew]

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

[herbko]

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

[cor]

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

[Giles]

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

[TheRealDrew]

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.

[Deep6]

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.

[cor]

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

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

Cor

[herbko]

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

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

Cor

[cor]

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

[Giles]

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.

[cor]

Which problem do you have? There's a few being mentioned. Im losing track of whats working and what isnt 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

[Giles]

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.

[cor]

Hi Giles, yeah..i fix^H^H^Hchanged some stuff 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

[Deep6]

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

[echeng]

THANK YOU, Cor. CSS browser compatibility is always a moving target...

[Craig Ruaux]

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.