1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by wolfpack, Jun 25, 2004.

  1. #1
    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"); ... }
    SEMrush
    ...

    <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?
     
    wolfpack, Jun 25, 2004 IP
    SEMrush
  2. SEbasic

    SEbasic Peon

    Messages:
    6,318
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    SEbasic, Jun 25, 2004 IP
  3. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
    Code (markup):
    NN4 will soon be gone anyway ;)

    Mick
     
    Arnica, Jun 27, 2004 IP
  4. wolfpack

    wolfpack Peon

    Messages:
    34
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Good suggestion, thanks.

    I read that
    media="all"
    Code (markup):
    will keep NN4 from seeing it too.

    Yeah well, currently I have people who still use it that I want to support...
     
    wolfpack, Jun 28, 2004 IP
  5. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.



    Me too. :(
     
    Arnica, Jun 28, 2004 IP
  6. fiftybyfifty

    fiftybyfifty Peon

    Messages:
    2
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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
     
    fiftybyfifty, Jul 4, 2004 IP
  7. wolfpack

    wolfpack Peon

    Messages:
    34
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    wolfpack, Jul 5, 2004 IP