Aw man, I almost have it. My friend is pounding me and I need to get this figured out.
Here is the relevant CSS:
body{
background-color:#000000;
}
#wrapper{
width: 1000px;
min-width: 620px;
height:100%;
}
#header{
width: 1000px;
min-width: 620px;
text-align:center;
}
/* align articles and ads */
#separator{
background-color:#000000;
height:25px;
width:1000px;
text-align:center;
)
#index_left_ads{
width: 200px;
background-image:url(/gif/column_left.gif);
background-repeat:repeat-y;
background-position:top;
float:left;
height:inherit;
}
#index_center_articles{
width: 600px;
background-color:#CCCCCC;
float:left;
height:100%;
text-align:inherit;
}
#index_right_ads{
width: 200px;
background-image:url(/gif/column_right.gif);
background-repeat:repeat-y;
background-position:top;
float:right;
height:inherit;
}
#footer{
min-width: 620px;
clear: both;
background-color:#CCCCCC;
width:1000px;
}
Here is the page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sailing ANarchy Test Page</title>
<link href="/css/SA_CSS.css" rel="stylesheet" type="text/css">
<link href="/css/page_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="/gif/SAlogos/SAlogo_07.gif" width="1000" height="128">
</div>
<div id="separator">
<?PHP include("z_sa_menu.inc"); ?>
</div>
<div id="index_left_ads">
<center>
<?PHP
include("includes/ads_lefttop.inc");
include("includes/ads_leftbottom.inc");
?>
</center>
<form method=GET action=http://www.google.com/custom>
<table border=0 align="center" cellspacing=0>
<tr valign=top>
<td height="75" align="center" valign="middle"> </td>
<td><a href=http://www.google.com/search>
<!--<IMG SRC=http://www.google.com/logos/Logo_40gry.gif border=0 ALT=Google align=middle></A> -->
</a></td>
<td align="center">
<p>
<input type=submit name=sa value="Find" />
<br />
<input type=hidden name=cof value="S:http://www.sailinganarchy.com;GL:1;AH:center;BGC:#CCCCCC;LH:108;L:http://www.sailinganarchy.com/gif/SAlogo.gif;LW:611;T:#003399;AWFID:7ac985d5c0bd6da1;" />
<input type=hidden name=domains value="www.sailinganarchy.com" />
<br />
<input type=radio name=sitesearch value="" />
<b><font face="Arial, Helvetica, sans-serif" color="#0033CC">WWW</font></b>
<input type=radio name=sitesearch value="www.sailinganarchy.com" checked />
<font color="#003399"><b><font face="Arial, Helvetica, sans-serif" color="#0033CC">SA</font></b></font></p> </td>
</tr>
</table>
<center>
<input type=text name=q size= 15 maxlength=255 value="" />
</center>
</form>
</div>
<div id="index_center_articles">
<p align="center"><a href="http://www.mauriprosailing.com?gad=CJ-9pI4CEgi0_U8E8POhnhj79dL-AyCf1a8R" target="_blank"><br>
<img src="/ADs/mauri pro/index_mps_08_06.jpg" alt="www.mauriprosailing.com" width="494" height="125" vspace="10" border="0" /></a>
<br>
<?PHP
include("index_articles.htm");
?>
<br />
<br />
</p>
<p align="center"><strong><font color="#004080" size="2" face="Arial, Helvetica, sans-serif">Page
| 1 | <a href="/index_page2.php">2</a> |</font></strong> </p>
<p align="center"><font size="2" face="Arial, Helvetica, sans-serif">| <a href="/about.htm">About</a> | <a href="/advertise.htm">Advertise</a> | <a href="/terms.htm">Legal</a> | <a href="/purchase/buy.htm">Swag</a> | <a href="/forums">Forums</a> |<br>
| <a href="/archives.htm">Archives</a> | <a href="/ask/ask.htm">Ask</a> | <a href="/editor/audio_video.php">Audio / Video</a> | <a href="/classified.htm">Classified</a> | <a href="/editor/pimpin.php">Pimp</a> | <a href="/calendar/race_calendar.php">Calendar</a> | <a href="http://sa.regatta-manager.com/sa/sasearch.do">Results</a> | <a href="/news">News</a> | </font></p>
</div>
<div id="index_right_ads">
<center>
<a href="http://www.apsltd.com//home.asp" target="_blank"></a>
<?PHP
include("includes/ads_righttop.inc");
include("includes/ads_rightbottom.inc");
?>
<script type="text/javascript"><!--
google_ad_client = "pub-3209814363124594";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_channel ="";
google_color_border = "336699";
google_color_bg = "CCCCCC";
google_color_link = "0000FF";
google_color_url = "008000";
google_color_text = "000000";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
</center>
</div>
<div id="footer">
<p align="center"><a href="#top"><img src="/gif/SAllogo105.gif" alt="Click to go to the top" width="105" height="21" border="0" /></a></p>
</div>
</div>
</body>
</html>
You can view the page at http://www.sailinganarchy.com/z_index_test3.php So now that you have seen my soul exposed here are the questions.
Why do the columns on the left and right not continue to the bottom of the page? How do I fix that?
The center column with the articles looks fine in FF. But in IE all the text is aligned to center. I know...I know, IE..... but is there something in my code or does the editor have to be specific in selecting a left alignment on his text, before he uploads his file?
Last and this is not a must fix like 1 and 2 must be fixed. I wanted the whole page to be centered. It is designed for a 1024x768 screen. But if someone has a higher resolution, then I wanted the page to be centered. Oddly enough I got it to work in IE but not FF.
I have some books that I have been pounding my head on and have seemed to have fixed most of my problems. We have lots (tons) of users in the military and corporate world, stationed around the world using older browsers and operating systems. I am trying to get the site working with CSS for everyone but...well, I'm sure many of you have dealt with this issue.
Thanks in advance.
Dave
