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

[didier.boelens]

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
{
}

 

[Robert Aldwinckle]

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 difference depends on whether the images are cached
and what your cache-checking option is set to.
E.g. setting it to Every visit... would be equivalent to Refresh
not having the images cached would be equivalent to Ctrl-F5
setting it to Never with all images cached would mean that
pressing Back would be identical to setting Work Offline
and then requesting its URL.

Use a tracer such as FiddlerTool to see this.


HTH

Robert Aldwinckle
---