1

I have a DIV with height/width of 15px. It has a background image also with height/width of 15px. The problem is the background image is being cut off a few pixels on right and bottom when zoomed out some levels in firefox. Here's a link and code below. Try viewing it in firefox.

 <div id="custom-checkbox"></div>

 #custom-checkbox 
 { 
     background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat; 
     width: 15px;
     height: 15px; 
 }
guitarPH
  • 201
  • 2
  • 16
  • 6
    You should not expect a browser to render anything perfectly if in zoom mode. – Linus Caldwell Apr 18 '13 at 00:06
  • 1
    I second Linus. Look at what a mess it could turn into trying to detect zoom levels: http://stackoverflow.com/a/5078596/1363726 – eivers88 Apr 18 '13 at 00:07
  • 1
    Also agree with Linus. The problem you are seeing is probably due to the way Firefox rounds pixels (sub pixels). http://ejohn.org/blog/sub-pixel-problems-in-css/ – showdev Apr 18 '13 at 00:18

1 Answers1

0

This is the best I can get it to display the rest is just firefoxes pixel rounding. 

    #custom-checkbox   
{   
    background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;   
    width: 15px !important;  
    height: 15px !important;  
    display:table;  
}

Hope this helps it's the best I could do.

dragonloverlord
  • 442
  • 5
  • 21