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

 

[David Dorward]

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.

 

[boeledi]

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?

 

[Travis Newbury]

(e-mail address removed) 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...