www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Sprite doesn't work in firefox

  1. #1
    Join Date
    Feb 2011
    Posts
    90

    CSS Sprite doesn't work in firefox

    if you see the following link in chrome:
    http://barzilaymor.co.il/diurplus/DiurPlus.php

    you will see in every rectangle, 4 small rectangles in the color blue, orange, green and red.

    But in firefox you see none of them.

    I have used CSS Sprite to create them and here is the code:
    HTML Code:
    <img src='' class='rectangular-key extra-info-key'/>
    <img src='' class='rectangular-key galley-key'/>
    <img src='' class='rectangular-key contact-key'/>
    <img src='' class='rectangular-key map-key'/>
    and the css:
    Code:
    .rectangular-key{
        width: 10px;
        height: 10px;
        background:url('image/strip.png');
    }
    .extra-info-key{
        background-position: -304px -135px; 
        border:0;
    }
    .galley-key{
         background-position:  -304px -152px;
          border:0;
    }
    .contact-key{
            background-position:  -304px -118px;
             border:0;
    }
    .map-key{
         background-position: -304px -169px;
          border:0;
    }
    what is wrong here?

    After all it is working well for me in IE and chrome, so what should I do in order to make it work for firefox?

  2. #2
    Join Date
    Feb 2011
    Posts
    90
    I have changed the img tags to div tags and it solved the problem.

    It seem that you can not do it with img tags.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles