SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image of Anchor not working with Safari/Firefox

    Hi,

    I have following Css where i have used back-ground image. Then i am generating Anchor and assigning css class which has image. It works fine with IE but does not work with Safari,Firefox and Chrome.

    Can anyone help me on how to fix it. I have given details below.

    Thanks,
    Chandan

    Css
    -------

    .HOME
    {
    BACKGROUND-IMAGE: url(../images/home.jpg);
    WIDTH: 56px;
    BACKGROUND-REPEAT: no-repeat;
    HEIGHT: 20px
    }
    .HOME A
    {
    WIDTH: 56px;
    HEIGHT: 20px
    }
    .HOME A:hover
    {
    BACKGROUND-IMAGE: url(../images/home1.jpg);
    WIDTH: 56px;
    HEIGHT: 20px
    }

    Html Code
    -----------

    <td class="HOME"><A href="#abc.html" Class ="Home" onclick="OpenPage()"/></td>

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try to use the image in the <a attribute, i.e.
    Code CSS:
    .HOME {
        width: 56px;
    }
     
    .HOME a{
        height: 20px;  background: url(../images/home.jpg) no-repeat;
    }
     
    .HOME a:hover{
        background: url(../images/home1.jpg);
     
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    You can't assign dimensions to inline elements such as anchors unless you first make them display:block. (.home a {display:block})

    From the look of your code I'm guessing that you don't have a doctype and that's why IE appears to work because you are tripping quirks mode and using legacy behaviour. Always use a full doctype or all versions of IE will behave like ie5 and you lose any new features. That's just a guess by the way as you didn't provide html


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •