CSS - btn hover change, other cross-compatibilty, best way?

[wolfpack]

Hello all--

First of all, a word of thanks for this site and this forum. DP offers great free tools and has attracted a great crowd to these fora -- knowledgeable, helpful and conciencious. Thank you all.

I have a sidebar with a dozen buttons for navigating around my site. The buttons are the same, with different text. Button style changes when the mouse is over it.

First take was 12 <img> tags, 24 pics w/onmouseover & onmouseout scripts. The code is a version of what Photoshop 6.0 generates. It appears to be pretty good compatibility-wize, but is bulky.

I'd like to do it in CSS. I'd like it to, as they say, "degrade" well in older browsers. Browser fonts are fine. Here's what I tried.

a.navbtn { ... background-image: url("pic1"); ... }

a.navbtn:hover { ... background-image: url("pic2"); ... }

...

<a href="about.html" class="navbtn">About Us</a>

In Netscape 4, the hover doesn't work, and that's ok. But what's not ok is, it's no longer a clickable link, it's just text.

If I put a div around the anchor and put the changing background pic there, NS7 and Opera 7 do the right thing, but in IE6 the div hover doesn't work.

So two questions.

1) Isn't there a well-known, by now canonical way to do this?

2) What's your favorite online resource for doing HTML/CSS that has good cross / backward compatibility?

[SEbasic]

Have you been using the quotes in the CSS when specifying the images - url("ojpojopij")

That could be throwing it...

I personally think that webmonkey is a great place to start learning CSS. For reference, I just do a google search for my problem for instance...

CSS Mac browser hack...

Normally the best way to find what I need

[Arnica]

NN4 does some really odd things with anchors. Best thing to do would be to load a simple style sheet for NN4 using a standard <link rel="stylesheet"...> and then load your all singing style through '@import' which NN4 ignores but modern browsers will merge together replacing duplicate styles.

<link rel="stylesheet" href="NN4.css" type="text/css">
<style type="text/css">
@import url(AllSingingStyle.css);
</style>

NN4 will soon be gone anyway ;)

Mick

[wolfpack]

Best thing to do would be to load a simple style sheet for NN4 using a standard <link rel="stylesheet"...> and then load your all singing style through '@import' which NN4 ignores but modern browsers will merge together replacing duplicate styles.

Good suggestion, thanks.

I read that media="all" will keep NN4 from seeing it too.


NN4 will soon be gone anyway ;)
Mick

Yeah well, currently I have people who still use it that I want to support...

[Arnica]

Good suggestion, thanks.

I read that media="all" will keep NN4 from seeing it too.It should but I haven't tried that yet. I believe if you specify any media other than 'screen' NN4 will ignore the style sheet.




Yeah well, currently I have people who still use it that I want to support...
Me too. :(

[fiftybyfifty]

IE doesnt support CSS's hover on anything other than links unfortunately, so if you need the hover to work in IE, you'll have to add it back to the link tag.

Recently I did a site where the owner still needed to support NN4, and wanted it to look somewhat reasonably laid out. For that I had to use two stylesheets - one that was @imported and one that was linked to. I started by adding the CSS for the look I needed into the linked stylesheet, if it broke in NN4 I moved it out to the imported stylesheet.

Another thing that you might notice is that sometimes browsers dont load the rollover image until you actually rollover- causing a slight lag. To eliminate that problem you could create the rollover as one image, and use the css to just move it around when you rollover it: it's explained in more detail here: http://wellstyled.com/css-nopreload-rollovers.html

You asked for good resources -

http://wellstyled.com/archive.html
http://css-discuss.incutio.com/
http://www.alistapart.com/

http://www.jessett.com/web_sites/css/css_browser_support.shtml

[wolfpack]

That's pretty sweet, particularly the variation at the bottom of the page.

(And especially since I already put containers around the buttons for my hack/workaround. But this solution is elegant. It's one of those, "Oh yeah that makes sense, why didn't I think of it?".)

Anyway, thanks, and thanks for the links. I'll start reading.