Hi all, I have spent a few hours on this now, and I have to admit that I have absolutely no idea what is going on. I have a background image that is not showing in IE7 and IE8, other browsers are ok. Here is the link http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/confirmation.html
I am completely baffled.
The code is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<div id="container">
<div class="left-column">
<h2>confirmation</h2>
<a href="#" class="trigger">See this</a>
<div class="openedContainer">
<div class="noCollapse">
<div class="left-container">
<p><span class="bold">Reference: </span>XXXXX <span class="bold leftSpace">Item: </span>10.00</p>
</div>
<div class="right-container">
<p><span class="">Email PDF invoice</span></p>
</div>
<div class="left-container">
<p><span class="bold">Item:</span> 100.00 with credit card</p>
</div>
<div class="left-container">
<p><span class="bold">Items:</span> 2 apples, 2 pears, 1 banana</p>
</div>
<div class="clear"></div>
</div>
<div class="toCollapse">
<div class="left-container">
<p><span class="wrappingText">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </span></p>
</div>
<div class="right-container">
<p><span class="pound">Summary</span></p>
<p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>
<p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>
</div>
<div class="left-container">
<a href="#">Need anything else?</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="openedContainer">
<div class="noCollapse">
<div class="left-container spaceBelow">
<h3>Here</h3>
</div>
<div class="right-container spaceBelow">
<h3>There</h3>
</div>
<div class="left-container">
<p class="withImage"><span >Lorem ipsum</span> <span class="leftSpace">dolor sit amet</span>,<span class="leftSpace"> consectetur adipiscing elit. </span><span class="leftSpace">Aliquam rhoncus lectus porttitor </span>lacus dictum viverra. Morbi eget ante vel elit rhoncus au</p>
</div>
<div class="right-container">
<p><span class="bold">Lorem ipsum dolor</span></p>
</div>
<div class="clear"></div>
</div>
<div class="toCollapse">
</div>
</div>
</div>
<div class="rightCol">
<h4> extra items</h4>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
h1, h2{
font-size:24px;
font-weight:normal;
}
h3{
font-size:18px;
font-weight:normal;
}
.clear{
clear:both;
}
.header_container{
padding: 0 10px;
}
.left-column{
margin-left:10px;
width:600px;
float:left;
background-color:white;
position:relative;
}
.left-column a.trigger{
position:absolute;
top:10px;
right:40px;
}
.rightCol{
width:340px;
float:left;
background-color:#ffffff;
}
.left-column, .rightCol{
min-height:100px;
padding-top:10px;
}
.left-column .openedContainer{
border-top:1px solid black;
margin:15px 15px 0px 15px;
padding: 10px 0;
}
.left-column .openedContainer .left-container{
width:315px;
}
.left-column .openedContainer .right-container{
width:255px;
}
.left-column .openedContainer .right-container > p, .left-column .openedContainer .right-container > h3{
text-align:right;
}
.left-column .openedContainer .left-container, .left-column .openedContainer .right-container{
float:left;
}
.left-column h2, .left-column h3, .left-column h4, .left-column h5{
margin-left:15px;
}
.left-column .left-container h2, .left-column .left-container h3, .left-column .left-container h4, .left-column .left-container h5{
margin-left:0;
}
span.pound{
}
.withImage{
background:url("images/chromeIcon.jpg")no-repeat 32% 0;
padding-left:0px;
height: 45px;
line-height: 34px;
}
.bold{
font-weight:bold;
}
.floatedRight{
float:right;
}
.leftSpace{
padding-left:49px;
}
.paddingRight{
padding-right:20px;
}
.spaceBelow{
padding-bottom:10px;
}
The offending bit is this:
<p class="withImage"><span >Lorem ipsum</span> <span class="leftSpace">dolor sit amet</span>,<span class="leftSpace"> consectetur adipiscing elit. </span><span class="leftSpace">Aliquam rhoncus lectus porttitor </span>lacus dictum viverra. Morbi eget ante vel elit rhoncus au</p>
with the relevant styles:
.withImage{
background:url("images/chromeIcon.jpg")no-repeat 32% 0;
padding-left:0px;
height: 45px;
line-height: 34px;
}
Now, in ie7 and ie8 not only the image doesn't show, but it is not even inside the debugging console. It's as if it is not inserted at all, ad if this background:url("images/chromeIcon.jpg")no-repeat 32% 0; is completely ignored.
I have tried to change/remove the line height, height etc but nothing. I removed the spans and left the paragraph only, but nothing. I have really no idea what it's going on. COuld it be that somehow the fact that the main container are floating has an inpact on the image? But then again why just ie7 and ie8?
If anybody could have a go, I would be extremely grateful, like I said I just don't understand what is going on there.
thanks
