I don't know if I'd worry about those browsers. They are *really* buggy. And statistically speaking, they're pretty much dead. You might get *four* visits from NS 6 and 7.0 in a year.
That said this is the best I can do:
Code:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: url("../images/bg.gif");
background-repeat: repeat;
text-align: center; /* This is for Explorer 5.5, 5 and 6 quirks mode*/
}
table.main {
border: 1px solid #221E1F;
}
ul {
list-style: none;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
}
li {
padding: 2px;
margin: 2px;
}
li a {
padding: 5px;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
}
li a:link {
color: #FFFFFF;
}
li a:visited {
color: #FFFFFF;
}
li a:hover {
color: #FFFFFF;
background-color: #9C8549;
border: thin solid #221E1F;
}
li a:active {
color: #FFFFFF;
background-color: #9C8549;
}
td.top {
background-color: #9C8549;
border: 2px solid #221E1F;
}
td.nav {
border: 2px solid #221E1F;
background-color: #0053A1;
}
td.sub_content {
background-color: #FFFFFF;
border: 2px solid #221E1F;
padding: 10px;
}
td.index_content {
background-image: url(../images/logo_home.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color: #FFFFFF;
border: 2px solid #221E1F;
padding: 10px;
}
div.content_title {
font-size: 18px;
margin: 0px;
}
div#container {
width: 850px;
position: relative;
margin: auto; /* Center in standards browsers */
text-align: left; /* Reset Explorer's inheritance of text-align */
}
div#sm_logo {
position: absolute;
width: 129px;
height: 127px;
z-index: 2;
top: 8px; /* This still isn't pixel perfect for NS 7.0 */
right: 6px;
}
td.sub_table {
text-align: left;
vertical-align: top;
}
span.sub_hdrs {
font-size: 14px;
font-weight: bold;
color: #0053A1;
}
#r1, #r2, #r3, #r4, #r5, #r6 {
display: none;
}
You may have to do some server-side browser-sniffing and output some NS 7.0-specific styles to make it pixel-perfect.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Kansas Association of Chiefs of Police: Page Name</title>
<link href="sub_template.php_files/KACPstyle.css" rel="stylesheet" type="text/css"></head>
<body onload="preloadImages();"><br>
<div id='container'>
<table width="850" class="main" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="top" colspan="2" valign="top">
<div id="sub_pg_banner">
<img src="sub_template.php_files/masthead.gif" width="850" height="65">
</div>
</td>
</tr>
<tr>
<td class="nav" width="260" valign="top">
[list]
<li>
<a href="http://www.kacp.cc/draft/index.php">Home</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">About Us</a></li>
<li>
<a href="http://www.kacp.cc/draft/regions_reps.php">Regions & Representatives</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Supplies & Merchandise</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Job Opportunities</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Special Activities</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Training & Conferences</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Sponsor Information</a></li>
<li>
<a href="http://www.kacp.cc/draft/index.php">Important LInks </a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="570" valign="top" class="sub_content">
<div class="content_title">Page Title </div><br>
Page content begins ...
<!--<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#00FFFF">
<img src="images/spacer.gif" width="570" height="273" border="0" alt="">
</td>
</tr>
</table>-->
</td>
</tr>
</tbody></table>
<div id="sm_logo">
<img src="sub_template.php_files/logo_int.gif" width="129" height="127">
</div>
</div>
</body></html>
Also, just so you know, this page is not valid XHTML Transitional, as it follows none of the XHTML syntax rules. It looks closer to HTML 4.01 Transitional. Use the W3 validation service at
http://validator.w3.org.
Anyway, so my solution is to cheat a bit. We can't get Netscape 7.0 to stop expanding the container of a relatively positioned element that contains an absolutely positioned element, so I move that element to the end of the document in an invisible container that we can position relative to and not notice the size change. You may find this botched up in Explorer. I didn't look at it in Explorer. If it is, you might try some conditional comment style sheets to target Explorer directly without affecting other browsers.
More about that here:
http://msdn.microsoft.com/workshop/a...omment_ovw.asp
I noticed you're using PHP, it just so happens I have a browser sniffing script already written in PHP. Feel free to use it.
Code:
function browser()
{
if (!defined('BROWSER'))
{
if (isset($_SERVER['HTTP_USER_AGENT']))
{
// The order that these are called is important!
// Many user agents try to fudge their identity.
$browsers = array(
'opera' => '!Opera[/ ]?((\d*)(\.)?(\d*))!', // Opera
'ie' => '!MSIE[/ ]?((\d*)(\.)?(\d*))!', // Explorer
'safari' => '!Safari[/ ]?((\d*)(\.)?(\d*))!', // Safari
'khtml' => '!KHTML!', // Konquorer (untested)
'gecko' => '!Gecko[/ ]?(\d*)!', // Netscape, Mozilla, Mozilla Firefox, AOL Mac, etc.
'netscape' => '!Mozilla[/ ]?((\d*)(\.)?(\d*))!' // Old Netscape version 4 and less.
);
foreach ($browsers as $browser => $pattern)
{
if (preg_match($pattern, $_SERVER['HTTP_USER_AGENT'], $matches))
{
if (!empty($matches[1]))
{
define('BROWSER_VERSION', $matches[1]);
}
define('BROWSER', $browser);
break;
}
}
if (!defined('BROWSER'))
{
define('BROWSER', null);
}
}
else
{
define('BROWSER', null);
}
}
else
{
return FALSE;
}
}
The correct way to use this function is as follows:
Code:
browser();
if (defined('BROWSER') && defined('BROWSER_VERSION'))
{
// Do some stuff based on the browser and browser version
if (BROWSER == 'gecko' && BROWSER_VERSION <= 20020823)
{
// This is Mozilla, Netscape and any Gecko browser made on or before the
// Netscape '7.0' build date.
// You can output a style sheet with Netscape 7.0 adjustments here.
}
}
HTH!
Regards,
Rich
--
[
http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
relative/absolute positioning whacked
