background-image and link?

Discussion in 'HTML' started by Rich West, Jan 14, 2004.

  1. Rich West

    Rich West Guest

    Can anyone tell me what I'm doing wrong here? I'd like to add a background
    image as a rollover in the hover condition (mouse over). I've tried the
    following code and it works in NS7 but not in IE6.

    Here's what I put in the style sheet. The links are <a> elements in the div
    named menu.

    div#menu a:link {
    display: block;
    margin: 14;
    color: #65786D;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    }

    div#menu a:visited {
    display: block;
    margin: 14;
    color: #65786D;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    }

    div#menu a:hover {
    display: block;
    margin: 14;
    color: #65786D;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(mtxtbkg.jpg);
    }

    Also, do I need to repeat all the code for each case? Or just what changes?
    Do I need a style for the a element alone?

    Thanks in advance for your help.
     
    Rich West, Jan 14, 2004
    #1
    1. Advertising

  2. Rich West

    Rich West Guest

    Maybe I can answer my own question: adding a background-color to the hover
    condition seems to have fixed the problem. I don't know why, but it's
    probably a good idea anyway incase some browser doesn't display the image.


    "Rich West" <> wrote in message
    news:Ee6Nb.12069$XD5.6239@fed1read06...
    > Can anyone tell me what I'm doing wrong here? I'd like to add a

    background
    > image as a rollover in the hover condition (mouse over). I've tried the
    > following code and it works in NS7 but not in IE6.
    >
    > Here's what I put in the style sheet. The links are <a> elements in the

    div
    > named menu.
    >
    > div#menu a:link {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > }
    >
    > div#menu a:visited {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > }
    >
    > div#menu a:hover {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > background-image: url(mtxtbkg.jpg);
    > }
    >
    > Also, do I need to repeat all the code for each case? Or just what

    changes?
    > Do I need a style for the a element alone?
    >
    > Thanks in advance for your help.
    >
    >
    >
     
    Rich West, Jan 14, 2004
    #2
    1. Advertising

  3. Rich West

    brucie Guest

    in post <news:Ee6Nb.12069$XD5.6239@fed1read06>
    Rich West said:

    > Can anyone tell me what I'm doing wrong here?


    a URL would have been much better

    > I'd like to add a background image as a rollover in the hover
    > condition (mouse over).


    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    > Also, do I need to repeat all the code for each case?
    > Or just what changes?


    it depends, usually just what changes. fun giggly things like the
    cascade, inheritance and bugs have an effect.

    > Do I need a style for the a element alone?


    if its different from the default.

    --
    brucie
     
    brucie, Jan 14, 2004
    #3
  4. Rich West

    Rich West Guest

    Sorry I didn't post the URL. It wasn't up yet but now it is:
    http://www.tsmithstudio.com and seems to be working.

    Thanks,

    Rich


    "Rich West" <> wrote in message
    news:Ee6Nb.12069$XD5.6239@fed1read06...
    > Can anyone tell me what I'm doing wrong here? I'd like to add a

    background
    > image as a rollover in the hover condition (mouse over). I've tried the
    > following code and it works in NS7 but not in IE6.
    >
    > Here's what I put in the style sheet. The links are <a> elements in the

    div
    > named menu.
    >
    > div#menu a:link {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > }
    >
    > div#menu a:visited {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > }
    >
    > div#menu a:hover {
    > display: block;
    > margin: 14;
    > color: #65786D;
    > font-size: 14pt;
    > font-family: Arial, Helvetica, sans-serif;
    > text-decoration: none;
    > background-image: url(mtxtbkg.jpg);
    > }
    >
    > Also, do I need to repeat all the code for each case? Or just what

    changes?
    > Do I need a style for the a element alone?
    >
    > Thanks in advance for your help.
    >
    >
    >
     
    Rich West, Jan 14, 2004
    #4
  5. Rich West

    brucie Guest

    brucie, Jan 14, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    856
    Kevin Spencer
    May 17, 2005
  2. Jean-Louis Crouzet

    Table td with background image & link & image

    Jean-Louis Crouzet, Jul 21, 2005, in forum: HTML
    Replies:
    4
    Views:
    1,633
    Jean-Louis Crouzet
    Jul 23, 2005
  3. jc
    Replies:
    3
    Views:
    1,733
  4. jc
    Replies:
    1
    Views:
    1,371
    Neredbojias
    Mar 19, 2008
  5. Dj Frenzy
    Replies:
    3
    Views:
    312
    Robert
    Feb 10, 2004
Loading...

Share This Page