Jump to content

CSS Sprite doesn't work in firefox


programAngel
 Share

Recommended Posts

if you see the following link in chrome:http://barzilaymor.co.il/diurplus/DiurPlus.phpyou 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:

<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:

.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?

Link to comment
Share on other sites

just an FYI, that link is literally just an explosion of PHP errors. I can only assume that the FF doesn't like the empty src tag. Maybe just use a dummy image in it's place. I usually just use a 1x1 transparent image.

Link to comment
Share on other sites

ah that's it. with no image in the src, it will have no height/width, thus not showing. and the CSS width/height won't apply to an inline element. I always gleam over that fact, doh.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...