[headbirth]

Hi, I'm trying to rollover the background image in a css, but can't seem to get it phrased correctly. This is what I have:

onmouseover="document.getElementById('test2').styl e.background = 'repeat-x url(../Art/Navigation/Cell_Green.jpg)';"

Any ideas?

[CaptainHaddock]

Here's a better idea: create a background image with two "areas", one for the normal look and one for the mouse-over. Then do some styles like so:

.button {
width: 100px;
height: 20px;
background: url("button.png");
}

.button:hover {
background-position: 0px -20px;
}

This slides the background image up 20 pixels on hover, so it looks like a different image. Note that Internet Explorer has trouble with :hover on most elements, so you'll have to use a small Javascript to enable :hover support. Do a Google search for examples of this, like the Suckerfish example.

[headbirth]

I tried something similar, but it doesn't seem supported in the Mozilla browsers (i tested it in Camino). It works like a dream in Safari though.

Is there a work around or fix to get it to work in Camino?

[Synotic]

Originally posted by headbirth:
Is there a work around or fix to get it to work in Camino?

It should work fine in most browsers, but try this information page for more details.

[headbirth]

Well, I got it to work in Camino by simply moving the class from the paragraph tag to the anchor tag. However, I'm unable to test it in IE because something in my code is causing IE to crash.

Any ideas or methods to debug this for IE? Would it be more likely that there is a css problem than anything else? My js has been working on it and I haven't modified it.

[skalie]

Originally posted by Synotic:
It should work fine in most browsers, but try this information page for more details.

Great link, cheers.

*goes back to tripling up images in photoshop*

edit: and then discovers that the 'active state' doesn't work in Panther, and nothing works at all in Netscape for windows.

[CaptainHaddock]

Getting CSS menus to work the first time is a learning experience.

When in doubt, find a site that already does it perfectly and copy all their stylesheets (as well as the IE hover javascript). Then adapt the styles and html piece by piece to your own design. Sure, it's time-consuming, but it's better than spinning your tires because you can't find the bug in your own code.

[skalie]

Originally posted by CaptainHaddock:
Getting CSS menus to work the first time is a learning experience.

When in doubt, find a site that already does it perfectly and copy all their stylesheets (as well as the IE hover javascript). Then adapt the styles and html piece by piece to your own design. Sure, it's time-consuming, but it's better than spinning your tires because you can't find the bug in your own code.

........... sounds like good advice, although the route I was going to go down was using php for browser detection, as in (excuse the lack of syntax, it's weekend)..........

Code:

if (browser == netscape 5 or less){
    // load pertaining stylesheet
            }else{
    // load default stylesheet
}

................ or is that have no real life advantage over the above(read: source = copy and pastable) method?

[Synotic]

Originally posted by skalie:
........... sounds like good advice, although the route I was going to go down was using php for browser detection, as in (excuse the lack of syntax, it's weekend)..........

<snip>

................ or is that have no real life advantage over the above(read: source = copy and pastable) method?

Browser detection is always pointless. You're going to have to always have to maintain multiple stylesheets and detection isn't reliable either. It's like creating custom code for every computer an application is going to run on as opposed to fixing the actual bug.