Background Image on TR in IE

[bdichiara]

At the top of my website, i have a graphic with the logo on the left. I also have another graphic on the right, however this graphic is not that important and just completes the header. To connect the two, I have a repeating graphic in the table rows background (so it looks smooth all the way across).
Lastly, i put a PNG image on top of the graphic on the right, so it overlaps the not-so-important graphic as it hides itself when the browser window is resized. The problem i'm having is that in IE, my background repeating image doesn't show up, causing a gap between my PNG and the un-important image. Any ideas on how to accomplish this and still maintain a clean/resizabable header?

here's my code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="noprint">
  <tr style="background-image:url(img/header_bg.jpg); background-repeat:repeat-x; background-position:top;">
    <td width="532" align="left" valign="top" nowrap="nowrap" style="background-image:url(img/header_bg.jpg); background-repeat:repeat-x; background-position:top;"><a href="index.php"><img src="img/logo.jpg" width="532" height="128" border="0"></a></td>
    <td align="left" valign="top" nowrap="nowrap" style="overflow:hidden; background-image:url(img/header_image.jpg); background-repeat:no-repeat; background-position:right;"><img src="img/fade.png" width="40" height="128" border="0"></td>
  </tr>
</table>

_______________
_brian.

 

[Vragabond]

Do you have an online example of this? It would be easier to debug, since we don't have any of the images you use. One suggestion is to add [tt]transparent[/tt] to your background declarations to specifically denote that your background color is transparent. Also, IE does not support transparent PNGs of more than 8-bits, so that could also be something to think about.

 

[BillyRayPreachersSon]

Also, IE does not support transparent PNGs of more than 8-bits

My tests have found that it supports index transparency fine, but if you want alpha transparency, then you MUST use 32-bit PNGs and the AlphaFilter.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bdichiara]

Sorry, I don't have an online example, but I figured out a way around this by placing a DIV on top of my table cell, then putting the background repeater in the cell, and the background "not-so-important" graphic in the div:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="noprint">
  <tr style="background-image:url(img/header_bg.jpg); background-repeat:repeat-x; background-position:top;">
    <td width="532" align="left" valign="top" nowrap="nowrap" style="background-image:url(img/header_bg.jpg); background-repeat:repeat-x; background-position:top;"><a href="index.php"><img src="img/logo.jpg" alt="" width="532" height="128" border="0"></a></td>
    <td align="left" valign="top" nowrap="nowrap" style="background-image:url(img/header_bg.jpg); background-repeat:repeat-x; background-position:top;"><div style="width:100%; height:128px; overflow:hidden; background-image:url(img/header_image.jpg); background-repeat:no-repeat; background-position:right; text-align:left;"><img src="img/fade.png" width="40" height="128" border="0" align="absmiddle"></div></td>
  </tr>
</table>

Also, I'm using a pngfix found on

http://homepage.ntlworld.com/bobosola/

_______________
_brian.

 

[traingamer]

The problem i'm having is that in IE, my background repeating image doesn't show up,

The short answer is because you're overriding the repeating background image in the row with a different non-repeating background image in the cell.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill