1
Hi!
I am new to this forum, but not new to web design and programming. Nevertheless, I have never tried to use PNG so extensively in my pages. here's the problem.
First, I have found that the PNG backgrounds and images had no transparency and grey around them when viewed in IE6, but I solved this bug using this hack. It works great, but then another problem came up: a background image that had the solution applied to was not repeating itself where it should have. IE6 was just ignoring the background repeat. Below is the markup code for which the validator gives 3 insignificant errors:
[HTML]<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Пирожки ))</TITLE>
<LINK rel="stylesheet" type="text/css" href="css1.css">
</HEAD>
<BODY id="body">
<TABLE style="margin: 5px;" width="99%" cellpadding="0" cellspacing="0" border="0">
<!-- HEADER STARTS here -->
<TR>
<TD id="header_left" height="187" width="116"> </TD>
<TD id="header_middle" height="187" align="center"><IMG src="logo.png" alt="Пироги"></TD>
<TD id="header_right" height="187" width="118"> </TD>
</TR>
<!-- HEADER ENDS here -->
<TR>
<TD colspan="3" height="15"></TD><!-- This is the spacing between the header and the body -->
</TR>
<!-- The BODY STARTS here -->
<TR>
<TD colspan="3">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD width="206" height="70"><IMG src="center_top_left.png"></TD>
<TD background="center_top_middle.png" align="center" valign="top"><IMG src="slogan.png" alt="Слоган"></TD>
<TD width="224" height="70"><IMG src="center_top_right.png"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD background="center_middle_left.png" width="11"> </TD>
<TD background="center_middle_center.png">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD width="163">
<!-- MENU box STARTS here -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 1</TD>
</TR>
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 2</TD>
</TR>
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 3</TD>
</TR>
</TABLE>
<!-- CONTENT box ENDS here -->
</TD>
<TD style="padding: 25px">
<!-- CONTENT box STARTS here -->
<TABLE cellpadding="0" cellspacing="0" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
<!-- CONTENT box ENDS here -->
</TD>
</TR>
</TABLE>
</TD>
<TD background="center_middle_right.png" width="12"> </TD>
</TR>
<TR>
<TD background="center_bottom_left.png" height="12"></TD>
<TD background="center_bottom_middle.png" height="12"></TD>
<TD background="center_bottom_right.png" height="12"></TD>
</TR>
</TABLE>
</TD>
</TR>
<!-- The BODY ENDS here -->
</TABLE>
</BODY>
</HTML>[/HTML]
I really needed the image to repeat. And I was almost out of hope when posting here, but my pride has saved me: I decided to read the comments to the above posted solution for the transparency problem. And I found it, though I couldn't find it anywhere else. For those, who don't feel like looking for it in the comments, here's the citation:
As mentioned earlier, repeating in any fashion is impossible. However, it is possible to ‘stretch’ the background over the whole area.
If you’re using a solid translucent color png background, you can stretch it across the whole area.
To do so, first do the standard css: .trans_white { background-image: url(trans_white.png); background-repeat: repeat; behavior: url(iepngfix.htc); }
Notice I added in the background-repeat. This is the variable that will indicate to the script to stretch it.
Now, we modify the script (iepngfix.htc) to look at the repeat: Find this: style.backgroundImage = ‘none’; filt(s, ‘crop’);
Replace it with this: style.backgroundImage = ‘none’; if(currentStyle.backgroundRepeat==”repeat”) filt(s, ‘scale’); else filt(s, ‘crop’);
Now, whenever a background has a background-repeat set to ‘repeat’, it’ll stretch the background image to encompass the whole area.
This can also be done to mimic repeat-x and repeat-y. You just need the div/td/whatever to ONLY encompass the area desired.
I hope this helps whoever has encountered a similar problem. Good luck!
