IE6 background-image problem - works with N6/7, Firefox

Discussion in 'HTML' started by didier.boelens@steams.be, Nov 15, 2005.

  1. Guest

    Hello Gurus,

    I am facing this crazy problem but I don't find any solution... Could
    you please help me?

    In fact, I am developping some kind of template control (ASCX file /
    ASP.NET 1.1) [I don't know if it matters] and with Netscape 6/7,
    Firefox, ... it is just perfect but with IE6, the behavior is quite
    different.

    So, when I am displaying (or attempting to display) the table's
    content, all the "background' images are not displayed (replaced by
    blanks). Refreshing (CTRL-F5, refresh button), simply changes the
    images that are displayed. If I am lucky, I have them all but...

    If I want to make sure to have a correct display, I click the IE "Back"
    button, then directly the "Forward" button. The result is then just
    perfect !!!!

    The same phenomenon occurs when a "postback" is sent...

    Once again, this behavior does not happen with Netscape, or Firefox...

    Please find hereafter the code of the ASCX component, as well as the
    one of the .CSS

    In advance, many thanks for your help.

    Didier

    ..ASCX part:

    <%@ Control Language="vb" AutoEventWireup="false"
    Codebehind="Test.ascx.vb" Inherits="DBMH.WebSite.Test2"
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <table
    cellSpacing="0" cellPadding="0" width="90%" border="0" align="center">
    <tr>
    <td class="block_top_corner_left"/>
    <td width="90%" height="43">
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
    <tr>
    <td class="block_header_tile_left" />
    <td class="block_header_tile_middle">
    <br><span><asp:label id="lblPageTitle"
    runat="server">Label</asp:label>
    </span>
    </td>
    <td class="block_header_tile_right" />
    </tr>
    </table>
    </td>
    <td class="block_top_corner_right" />
    <!--Top Spacer -->
    <tr>
    <td class="block_topspacer_left" />
    <td class="block_topspacer_middle" />
    <td class="block_topspacer_right" />
    </tr>
    <!-- Center -->
    <tr>
    <td class="block_middle_left"/>
    <td>Hello everybody<br>How are you doing today?</td>
    <td class="block_middle_right"/>
    </tr>
    <!-- Bottom Spacer -->
    <tr>
    <td class="block_bottomspacer_left" />
    <td class="block_bottomspacer_middle" />
    <td class="block_bottomspacer_right" />
    </tr>
    <!-- Footer -->
    <tr>
    <td class="block_bottom_corner_left"/>
    <td class="block_bottom_corner_middle"/>
    <td class="block_bottom_corner_right" />
    </tr>
    </table>

    Now, the .CSS:

    ..block_header_tile_left
    {
    background-image: url(images/block/block_title_tile_left.gif);
    height: 43px;
    }
    ..block_header_tile_middle
    {
    background-image: url(images/block/block_title_tile_middle.gif);
    height: 43px;
    width: 100%;
    font-size: 14px;
    font-weight : bold;
    color: White;
    vertical-align: top;
    }
    ..block_header_tile_right
    {
    background-image: url(images/block/block_title_tile_right.gif);
    height: 43px;
    }

    ..block_top_corner_left
    {
    background-image: url(images/block/block_top_left.gif);
    height: 43px;
    width: 28px;
    vertical-align:top;
    }

    ..block_top_corner_right
    {
    background-image: url(images/block/block_top_right.gif);
    height: 43px;
    width: 28px;
    vertical-align:top;
    }

    ..block_topspacer_left
    {
    background-image: url(images/block/block_topspacer_left.gif);
    width: 28px;
    height: 10px;
    }

    ..block_topspacer_middle
    {
    background-image: url(images/block/block_topspacer_middle.gif);
    height: 10px;
    }

    ..block_topspacer_right
    {
    background-image: url(images/block/block_topspacer_right.gif);
    width: 28px;
    height: 10px;
    }

    ..block_middle_left
    {
    background-image: url(images/block/block_middle_left.gif);
    width: 28px;
    }

    ..block_middle_right
    {
    background-image: url(images/block/block_middle_right.gif);
    width: 28px;
    }

    ..block_bottomspacer_left
    {
    background-image: url(images/block/block_bottomspacer_left.gif);
    width: 28px;
    height: 4px;
    }

    ..block_bottomspacer_middle
    {
    background-image: url(images/block/block_bottomspacer_middle.gif);
    height: 4px;
    }

    ..block_bottomspacer_right
    {
    background-image: url(images/block/block_bottomspacer_right.gif);
    width: 28px;
    height: 4px;
    }

    ..block_bottom_corner_left
    {
    background-image: url(images/block/block_bottom_left.gif);
    height: 24px;
    width: 21px;
    vertical-align:top;
    }

    ..block_bottom_corner_middle
    {
    background-image: url(images/block/block_bottom_middle.gif);
    height: 24px;
    vertical-align:top;
    }

    ..block_bottom_corner_right
    {
    background-image: url(images/block/block_bottom_right.gif);
    height: 24px;
    width: 21px;
    vertical-align:top;
    }

    body
    {
    }
    , Nov 15, 2005
    #1
    1. Advertising

  2. wrote:

    > In fact, I am developping some kind of template control (ASCX file /
    > ASP.NET 1.1) [I don't know if it matters] and with Netscape 6/7,
    > Firefox, ... it is just perfect but with IE6, the behavior is quite
    > different.


    Well, since the problem is with what is rendered by the client, then its the
    code the client sees that is important.

    > <td class="block_top_corner_left"/>


    Assuming this doesn't get converting in some magic way, then it seems likely
    you are writing XHTML and serving it as application/xhtml+xml to some
    clients and text/html to others.

    If you server it as text/html then you need to follow Appendix C of the
    XHTML 1.0 spec, which you aren't.

    That means (among other things) that self-closing tags should have a space
    before the "/", and that only elements which are defined as empty in the
    spec (which <td> isn't) should be represented using self-closing tags.

    Also - you shouldn't be abusing tables for layout in that fashion.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Nov 15, 2005
    #2
    1. Advertising

  3. boeledi Guest

    Thanks for your answer. I have then adapted the code as follows but
    nothing changes... (even putting a &nbsp; before the </td>).

    <table cellSpacing="0" cellPadding="0" width="90%" border="0"
    align="center">
    <tr>
    <td class="block_top_corner_left"></td>
    <td width="90%" height="43">
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
    <tr>
    <td class="block_header_tile_left"></td>
    <td class="block_header_tile_middle">
    <br>
    <span>
    <asp:label id="lblPageTitle" runat="server">Label</asp:label>
    </span>
    </td>
    <td class="block_header_tile_right"></td>
    </tr>
    </table>
    </td>
    <td class="block_top_corner_right"></td>
    <!--Top Spacer -->
    <tr>
    <td class="block_topspacer_left"></td>
    <td class="block_topspacer_middle"></td>
    <td class="block_topspacer_right"></td>
    </tr>
    <!-- Center -->
    <tr>
    <td class="block_middle_left"></td>
    <td>Hello everybody<br>How are you doing today?</td>
    <td class="block_middle_right"></td>
    </tr>
    <!-- Bottom Spacer -->
    <tr>
    <td class="block_bottomspacer_left"></td>
    <td class="block_bottomspacer_middle"></td>
    <td class="block_bottomspacer_right"></td>
    </tr>
    <!-- Footer -->
    <tr>
    <td class="block_bottom_corner_left"></td>
    <td class="block_bottom_corner_middle"></td>
    <td class="block_bottom_corner_right"></td>
    </tr>
    </table>

    Any other idea?
    boeledi, Nov 15, 2005
    #3
  4. said:

    > Hello Gurus,


    Name calling will get you no where!


    > I am facing this crazy problem but I don't find any solution...
    > Could you please help me?..


    Yep, as soon as you supply a URL...

    --
    -=tn=-
    Travis Newbury, Nov 15, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ivor O'Connor
    Replies:
    4
    Views:
    826
    Isofarro
    Nov 25, 2003
  2. PeterKellner
    Replies:
    0
    Views:
    573
    PeterKellner
    Jun 1, 2006
  3. stillworkingfortheman
    Replies:
    0
    Views:
    333
    stillworkingfortheman
    Oct 19, 2006
  4. Nospam
    Replies:
    4
    Views:
    369
    Nospam
    Jan 27, 2007
  5. Dennis McCarthy

    CheckBoxField works in Firefox but not in IE6

    Dennis McCarthy, Jan 25, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    101
    Dennis McCarthy
    Jan 25, 2007
Loading...

Share This Page