I'm trying to figure out how to build web pages that are cross-browser/cross screen resolution compatible, but the task has suddenly dropped me in the middle of the browser wars and I was wondering if anyone else has dealt with these problems in the past.
1. I'm trying to use a transparent png for the background of my tables within the website, but I found that all IEs before IE7 won't support transparent pngs. I've tried adding the code
<!--[if gte IE 5]>
<style type="text/css">
div.DIVNAME {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='IMAGE.png' ,sizingMethod='crop');
}
</style>
<![endif]-->
to my header section of the website right below the div that's for all the other browsers (this was taken from a website tutorial on the subject) but it's not resulted in anything whatsoever (the full un-transparent background is still visible in the tables).
2. I found that using 9 px font is huge on an 800x600 resolution, and incredibly tiny on the 1600x1200 (or something like that) screen resolution. Is it possible to set font size as percent of the screen size?
I never knew that trying to code a webpage up could be so confusing. I don't know if there are any answers to these odd ball questions besides perhaps demanding the users to go out and DL IE7 or put up with the non-transparent background 
, but I'd like to see if anyone else has hit this block wall as well first. :
Thank you,
Pascal
-CODE-
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!- STYLE SETTINGS>
<STYLE TYPE="text/css">
BODY {background-image: url(BACKGROUND.jpg);
background-repeat: 1;
background-position: 75% 40%;
background-attachment: fixed;
background-color: #000000;
margin: 0% 0% 0% 0%;
padding: 0;
}
<style>
body {background-color:#000}
div.hexagon {background:url(HEXAGON.png) repeat;}
</style>
<!--[if gte IE 5]>
<style type="text/css">
div.hexagon {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='HEXAGON.png' ,sizingMethod='crop');
}
</style>
<![endif]-->
</HEAD>
<!- STUFF FOR DOC>
<Table BORDER="2" WIDTH=62% BORDERCOLOR="#afd2ee" BORDERCOLORDARK="#afd2ee" CELLSPACING="0" CELLPADDING="0" STYLE="position:relative; left:18%; margin: 5% 0% 7% 0%;">
<TR>
<!- Writing Section>
<TD>
<div class="hexagon">
<TABLE WIDTH="90%" STYLE="position: relative; left: 5%; "><TR><TD>
<FONT FACE="Verdana" STYLE="font-SIZE:17px;" COLOR="051639">
<!-ENTER TEXT FOR PRIMARY PARAGRAPH HERE>
<SPAN STYLE="opacity:0.1; filter: alpha(opacity=10);">_________________________________</SPAN>
<!- THESE ARE USED TO MAKE THE DIV BACKGROUND FILL THE WHOLE TABLE>
_________________________________
</FONT>
</TD></TR></TABLE>
</div>
</TR></TD>
</Table>
<!-END DOCUMENT>
</BODY>
</HTML>
