QPR
asked on
background image not showing correctly in IE7
I've been developing an intranet for IE6 users and all has gone well.
I have just checked it out using IE7 and there is a very strange behaviour.
This is how the image looks in IE6 (resized for speed)
http://www.wanganui.govt.nz/w1.gif
and this is how it displays in IE7
http://www.wanganui.govt.nz/w2.gif
The top image (top half of fish head) is a standard <img>
The bottom half that does not show properly in IE7 is a TD background.
Here is the relevant code from the page
<table width="955" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="2" style="height: 83px; width:955"><img alt="WANDA" border="0" src="images/WandaTop2.jpg" width="955" height="83" runat="server" usemap="#isMap" /></td>
</tr>
<tr>
<td style="width: 258px; height: 520px; background-image:url(/wand a/images/W andaSide.j pg); background-position: left top; background-attachment: fixed; background-repeat: no-repeat;" valign="top">
<div style="z-index: 101; left: 8px; width: 176px; position: relative; top: 32px;">
<br />
<br />
<span style="font-family:Gill Sans MT; color:White">Intranet Essentials</span><br />
<a class="linklist" href="absentees.aspx" runat="server">Absentees</ a><br />
<a class="linklist" href="http://wdc-dvmain/Intranet/forum/login.asp?target=default.asp" runat="server">The Lounge</a><br />
<a class="linklist" href="Tatou hui/TatouHui.doc" runat="server">Tatou Hui</a><br />
<a class="linklist" href="socialClub/default.a spx" runat="server">Social Club</a><br />
<span style="font-family:Gill Sans MT; color:White">External Links</span><br />
<a class="linklist" href="http://www.sarjeant.org.nz" target="_blank">Gallery</a ><br />
<a class="linklist" href="http://www.wanganui-museum.org.nz" target="_blank">Museum</a> <br />
<a class="linklist" href="http://www.wanganuilibrary.com" target="_blank">Library</a ><br />
<a class="linklist" href="http://www.lgnz.co.nz" target="_blank"> LGNZ</a><br />
<a class="linklist" href="http://www.royaloperahouse.co.nz" target="_blank">Opera House</a><br />
<a class="linklist" href="http://www.wanganuiinc.co.nz" target="_blank">WINC</a><b r />
<span style="font-family:Gill Sans MT; color:White">Interactive</ span><br />
<a class="linklist" href="http://wdc-16/wdc_live/">My Payslips</a><br />
<a class="linklist" href="#">IT Help Desk</a><br />
<a class="linklist" href="Talk2Wanda.aspx" runat="server">Talk to Wanda</a><br />
<a class="linklist" href="search.aspx" runat="server">Search</a>< br />
</div>
<img alt="" src="images/spacer.gif" width="258" height="5" runat="server" /><br />
</td>
<td align="left" valign="top" style="width: 689px;">
<img src="images/wandawords.gif " runat="server" alt="WDC Announcements" />
<table width="685px">
<tr>
<td valign="top" style="width: 700px">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
I have just checked it out using IE7 and there is a very strange behaviour.
This is how the image looks in IE6 (resized for speed)
http://www.wanganui.govt.nz/w1.gif
and this is how it displays in IE7
http://www.wanganui.govt.nz/w2.gif
The top image (top half of fish head) is a standard <img>
The bottom half that does not show properly in IE7 is a TD background.
Here is the relevant code from the page
<table width="955" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="2" style="height: 83px; width:955"><img alt="WANDA" border="0" src="images/WandaTop2.jpg"
</tr>
<tr>
<td style="width: 258px; height: 520px; background-image:url(/wand
<div style="z-index: 101; left: 8px; width: 176px; position: relative; top: 32px;">
<br />
<br />
<span style="font-family:Gill Sans MT; color:White">Intranet Essentials</span><br />
<a class="linklist" href="absentees.aspx" runat="server">Absentees</
<a class="linklist" href="http://wdc-dvmain/Intranet/forum/login.asp?target=default.asp" runat="server">The Lounge</a><br />
<a class="linklist" href="Tatou hui/TatouHui.doc" runat="server">Tatou Hui</a><br />
<a class="linklist" href="socialClub/default.a
<span style="font-family:Gill Sans MT; color:White">External Links</span><br />
<a class="linklist" href="http://www.sarjeant.org.nz" target="_blank">Gallery</a
<a class="linklist" href="http://www.wanganui-museum.org.nz" target="_blank">Museum</a>
<a class="linklist" href="http://www.wanganuilibrary.com" target="_blank">Library</a
<a class="linklist" href="http://www.lgnz.co.nz" target="_blank"> LGNZ</a><br />
<a class="linklist" href="http://www.royaloperahouse.co.nz" target="_blank">Opera House</a><br />
<a class="linklist" href="http://www.wanganuiinc.co.nz" target="_blank">WINC</a><b
<span style="font-family:Gill Sans MT; color:White">Interactive</
<a class="linklist" href="http://wdc-16/wdc_live/">My Payslips</a><br />
<a class="linklist" href="#">IT Help Desk</a><br />
<a class="linklist" href="Talk2Wanda.aspx" runat="server">Talk to Wanda</a><br />
<a class="linklist" href="search.aspx" runat="server">Search</a><
</div>
<img alt="" src="images/spacer.gif" width="258" height="5" runat="server" /><br />
</td>
<td align="left" valign="top" style="width: 689px;">
<img src="images/wandawords.gif
<table width="685px">
<tr>
<td valign="top" style="width: 700px">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
ASKER
well spotted, made no difference tho :(
the relevant code would include your stylesheet. please provide :-)
ASKER
The relevant bit was this....
background-image:url(/wand a/images/W andaSide.j pg);
IE6 resolved the path no problem but for some reason IE7 couldn't! (have sinced tested or 4 different IE7 boxes) if I changed it to
background-image:url(image s/WandaSid e.jpg);
it works perfectly. Weird as the folder structure is same as it's always been
background-image:url(/wand
IE6 resolved the path no problem but for some reason IE7 couldn't! (have sinced tested or 4 different IE7 boxes) if I changed it to
background-image:url(image
it works perfectly. Weird as the folder structure is same as it's always been
you could try either, or both, z-indices and clearing
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Closed, 500 points refunded.
Vee_Mod
Community Support Moderator
Vee_Mod
Community Support Moderator
you have <td colspan="2" style="height: 83px; width:955">
but it should be <td colspan="2" style="height: 83px; width:955px">