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">&nb sp;</TD>
<TD id="header_midd le" height="187" align="center"> <IMG src="logo.png" alt="Пироги"></TD>
<TD id="header_righ t" height="187" width="118">&nb sp;</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"><IM G src="center_top _left.png"></TD>
<TD background="cen ter_top_middle. png" align="center" valign="top"><I MG src="slogan.png " alt="Слоган"></TD>
<TD width="224" height="70"><IM G 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="cen ter_middle_left .png" width="11">&nbs p;</TD>
<TD background="cen ter_middle_cent er.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="cen ter_middle_righ t.png" width="12">&nbs p;</TD>
</TR>
<TR>
<TD background="cen ter_bottom_left .png" height="12"></TD>
<TD background="cen ter_bottom_midd le.png" height="12"></TD>
<TD background="cen ter_bottom_righ t.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.ht c); }
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.backgroun dImage = ‘none’; filt(s, ‘crop’);
Replace it with this: style.backgroun dImage = ‘none’; if(currentStyle .backgroundRepe at==”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!
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">&nb sp;</TD>
<TD id="header_midd le" height="187" align="center"> <IMG src="logo.png" alt="Пироги"></TD>
<TD id="header_righ t" height="187" width="118">&nb sp;</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"><IM G src="center_top _left.png"></TD>
<TD background="cen ter_top_middle. png" align="center" valign="top"><I MG src="slogan.png " alt="Слоган"></TD>
<TD width="224" height="70"><IM G 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="cen ter_middle_left .png" width="11">&nbs p;</TD>
<TD background="cen ter_middle_cent er.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="cen ter_middle_righ t.png" width="12">&nbs p;</TD>
</TR>
<TR>
<TD background="cen ter_bottom_left .png" height="12"></TD>
<TD background="cen ter_bottom_midd le.png" height="12"></TD>
<TD background="cen ter_bottom_righ t.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.ht c); }
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.backgroun dImage = ‘none’; filt(s, ‘crop’);
Replace it with this: style.backgroun dImage = ‘none’; if(currentStyle .backgroundRepe at==”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!
Comment