?
Solved

background image not showing correctly in IE7

Posted on 2007-10-10
8
Medium Priority
?
420 Views
Last Modified: 2010-05-18
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(/wanda/images/WandaSide.jpg); 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.aspx" 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><br />
        <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>  

0
Comment
Question by:QPR
7 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20053637
in the td holding the image, you're missing a 'px'

you have <td colspan="2" style="height: 83px; width:955">

but it should be <td colspan="2" style="height: 83px; width:955px">
0
 
LVL 29

Author Comment

by:QPR
ID: 20053645
well spotted, made no difference tho :(
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20059461
the relevant code would include your stylesheet. please provide :-)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 29

Author Comment

by:QPR
ID: 20060133
The relevant bit was this....
background-image:url(/wanda/images/WandaSide.jpg);

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(images/WandaSide.jpg);
it works perfectly. Weird as the folder structure is same as it's always been
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20060166
you could try either, or both, z-indices and clearing
0
 
LVL 29

Accepted Solution

by:
QPR earned 0 total points
ID: 20196589
Solved. I took out this bit... background-attachment: fixed and now it displays perfectly
0
 
LVL 1

Expert Comment

by:Vee_Mod
ID: 20248678
Closed, 500 points refunded.
Vee_Mod
Community Support Moderator
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question