CSS imagemap with text rollover

Figured it out Geoff.....

Take out all the references to the ID's for each LI and the code below. Apparently all the LI's needed were to be made inline to function right. The ghost list your seeing was all the LI's being declared with the same width and heights as the anchors. That's one area I didn't experiment much because it appeared to work.

Code: Select all

#b, #b a {
 
becomes
 
#b a {

Code: Select all

 
#map li { display: inline; }

mreine, you are my saviour! It seems to work by simply adding the line

HTML: Select all

#map li {display:inline;}

and leaving the id's etc as they are...

Be careful, Display:inline; tends to add a space between the li's in some browsers i.e. Safari and some others. I can;t check right now but I will later.

__________________

I would still remove the calls to the LI ID's because they are now overhead and not needed.

Hi, I have taken out the LI ID's, and as you say mreine, they were no longer needed. I have checked it in IE, firefox and netscape... but I don't have safari etc (I probably should though). Could someone please check it for me? http://www.bluetomatoes.co.uk/map02/index_show.php (cornwall is still the only I have made to look right)

Although, thinking about it, I can't see my target audience using anything but IE or maybe netscape...

Get Mozilla for basic Safari testing. It's pretty much the same, but I agree, it would be nice to get a definate Safari test from someone to be sure.

Don't know if you have plans to do so, but I would consider remaking the hover gifs! They no longer work for the new color scheme. The county border lines should remain black and only the yellow part should be changing colors for it too look nice. It looks like you already did so with Cornwall

Actually Safari uses KHTML the same as Konqueror etc. but yeah, if it works in FF it will probably work in Safari too. You could make a demo account at www.browsercam.com. I will test it for you when I get home tonight if someone else has not already.

__________________

I was actually talking about Mozilla 1.7, not Mozilla Firefox. Have you ever compared the two Moojoo? I'm under the impression that Mozilla 1.7 operates extremely similiar to Safari. It would be nice to get some first hand knowledge of this instead of relying on wherever I found this info, which I don't even recall now.

I would say similar is accurate but Mozilla like FF uses gecko as well. Gecko and KHTML are different. but both are far superior than IE's engine so eh.. Gecko and KHTML are very very close each has its own little quirks etc. But yes it is safe to assume if it works in Mozilla it will work in Safari. One thing I have noticed is that Safari is a bit more strict than FF and Moz.

Alternately Apples WebKit is a bit different than the KHTML engine used in linux browsers like konqueror.. I dunno much about it really heh.

Some good info here

__________________

I'm not completely decided on the colours as yet, which is why I haven't made the county borders remain black. Would it be an advantage for search engines to have text hovers ahead of gifs?

I'm downloading Mozilla 1.7.13 now, and if it works ok on that, then thats IE, ff, mozilla and probably safari covered... that should be enough...

sorry wrong thread

I agree Geoff, you should be fine. I've already tested it with Mozilla and it works perfect.

I do my initial testing only with IE6 and FireFox(latest). Once I am satisfied I then check with Mozilla, Opera and Netscape. I don't bother with backwards compatibility anymore. Anyone using a browser other then IE knows to do updates and they are so easy and pretty much automatic which means backwards checking is pointless.

Far as IE.. I don't bother with 5.0 versions. The longer people support that garbage the longer it takes to force updates. It's amazing how many people still want to code for it. Total waste! I doubt this hover map functions in IE5.

I test with the following:

IE 5.0
IE 5.5
IE 6
IE 7
Opera Mac/Win
Firefox Mac/Win (Latest Build)
Safari
Omniweb
Camino
Lynx (Text Only Browser)
Konqueror

__________________