Question

I have the following html:

<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit6"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit4"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit4"></div>
    <div class="count-digit digit2"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit3"></div>
    <div class="count-digit digit9"></div>
</div>

Tied to each “.count-digit” is a sprite (viz. background image) which represents a png of a numeric digit. I’m trying to get the sprites to show horizontally with spacing, like this:

06 04 42 39

The CSS I’m using looks like this:

     .count-unit 
     {
         margin: 0 20px 0 20px;
         padding: 0 20px 0 20px;
     }

     .count-digit { 
        background-image     : url(Images/numbers.png); 
        background-color     : transparent; 
        background-repeat    : no-repeat; 
        float: left;
     } 

     .digit0 { 
        height               : 44px; 
        width                : 30px; 
        background-position  : -0px -0px; 
     } 

Only one of the sample digits (“.digit0”) is shown. As can be seen, I’m trying to put the spacing around each “numeric” image-pair with padding or margins on the containing “count-unit” div. It isn’t working. The “float: left” on the “.count-digit” is bypassing margin and padding settings.

How should I fix this? I tend to think I need to kill the floats, but the alternative “display: inline” prevents the sprites from showing.

Worse, though these sprites work on IE8 and Chrome, they aren’t showing when I turn on IE8 compatability mode. I’m not sure what that is about. Any ideas?

Answer 1

The float: left property shouldn’t ignore margins or padding. I think you should have specify floating for the .count-unit class though.

.count-unit {
    margin: ...
    padding: ...
    float: left;
}

I’ve tried it here, and there doesn’t seem to be any problem: http://jsfiddle.net/QGZjn/1/