Question

I have a table cell in which i have to set a background image, the background image i have basically contains 3 parts 1st is the top part (which comes out fine) 2nd is the bottom part which also appears fine and the 3rd that is the middle portion is a sprite which has a height of 57px.
This image(3rd) can be repeated in the x direction but i need to somehow stretch it in Y direction.
In firefox this image fits perfectly using the background-size:contain property but this property does not work for IE.

So I’m setting the cell height to 57px (which is the height of the image) and repeating the image only in x direction. The HTML i have looks something like this:

<table>
     <tr>
        <td>
               <ul>    //for some reason i'm using li tags for setting the images
                  <li class="img1"></li>
                  <li class="img3"></li> //the middle img which is creating the problem
                  <li class="img2"></li>
               </ul>
         </td>
    </tr>
</table>

Here is the css i have written for the class "img3"

.img3 {
        background-image: url("../images/PictorialViewBoxes/Blue_Middle.jpg");
        list-style: none;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: Bolder;
        text-align: center;
        width: 160px;
        word-wrap: normal;
        text-transform: capitalize;
        cursor: pointer;
        padding-left:10px;
        padding-right:10px;
        min-height: 57px;
        max-height: 57px;
        font-family: arial;
        background-repeat:repeat-x;
        overflow-y:hidden;
        }

The height of the cell containing these background images is ‘auto’ Now this works fine is all browsers even IE8 but not in IE7 here is the result in IE8 and IE7 :-

I don’t understand why this white gap is coming in IE7!!

Link to JSFiddle: https://jsfiddle.net/qYNAD/8/

Answer 1

Here’s your fix:

ul {
    overflow: hidden;
}

li {
    clear:both;
    float:left;
}