Background Image not appearing properly in IE7
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!!
3 answers
solution1
1 ACCPTED 2011-11-28 12:32:45
Here's your fix:
ul {
overflow: hidden;
}
li {
clear:both;
float:left;
}
solution2
0 2015-05-27 08:56:01
I fixed it by adding af transparent border to the dom element with the background image:
Css before fix:
li.icontwo {
padding:7px 0px 25px 70px;
background:url(/images/icon2.png) left top no-repeat;
}
Css after fix:
li.icontwo {
padding:7px 0px 25px 70px;
background:url(/images/icon2.png) left top no-repeat;
border:1px solid transparent;
}
I know its a hack but it works.
solution3
0 2011-11-28 11:18:47
Increase the height to fit the image and make sure you´re using a DOCTYPE, this is often causing different a behavior in IE.
<!DOCTYPE html>
<html>...
It might also me the line-height that´s causing your problems. Read more at http://reference.sitepoint.com/css/line-height
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.