View Full Version : Column Align Prob - Looks OK on Mac, but screwed on PC

05-21-2005, 12:06 AM
I've got a problem with a PHP/mySQL site that I've created recently. I programmed everything on a Mac and it displays perfectly, but the band for whom I did it for got some reports of the site being screwy on PCs. The page is basically organized into two columns, with all of the content organized in different tables in different cells. I've created include file for the head and the foot, then dynamically inserted content for each page -- the structure from an included PHP file, and the content from mySQL. I got a screen shot see here:


and it looks like the main left column is all out of whack. Here's a screenshot of what it's supposed to look like:


I'm not sure why this would be happening, I checked out the source code and everything looks OK. If someone could help, I'd really appreciate it. Here is the direct link for the actual page behind the screenshot above:


From what I've heard, this misalignment seems to be occuring for every section except the 'Press' section. If it helps, here is my code for the header and footer includes:

Header Include:

$headphotos = array();
$headdir = "mainhead_photos";
$headhandle = opendir ($headdir);
while (false !==($head = readdir ($headhandle))){
$length = strlen($head);
$start = $length - 3;
$fileext = substr ($head, $start, $length);
if ($fileext == "jpg"){
$headphotos[] = $head;
$randnum = rand (0, (count($headphotos)-1));
$randnum = round($randnum);
$headimage = $headdir."/".$headphotos[$randnum];
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title><?php print ("$page_title"); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/global.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="images/favicon.ico">
<script language="JavaScript" type="text/JavaScript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

function popWin(youRL,windowName, features){
window.open (youRL, windowName, features);


<body class="shurmanbg" topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0" onLoad="MM_preloadImages('images/nav_news_over.gif','images/nav_shows_over.gif','images/nav_audiovideo_over.gif','images/nav_photos_over.gif','images/nav_merch_over.gif','images/nav_press_over.gif','images/nav_forum_over.gif','images/nav_contact_over.gif','images/nav_links_over.gif')">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td width="115" rowspan="5">&nbsp;</td>
<td width="390" height="300" rowspan="2" align="right"><img src=<?php print ("$headimage"); ?> width="390" height="300"></td>
<td width="310" height="245"><img src="images/main_head_pinata.gif" width="310" height="245"></td>
<td width="117" rowspan="5">&nbsp;</td>
<td height="55"><img src="images/main_head_logo.gif" width="310" height="55"></td>
<td height="20" colspan="2">&nbsp;</td>
<td height="40" colspan="2" align="center" valign="top">
<?php require("shurman_nav.php"); ?> </td>
<td colspan="2" align="center" valign="top"><table height="100%" border="0" cellpadding="0" cellspacing="0">
<td colspan="5"><img src="images/main_topedge.gif" width="700" height="10"></td>
<td width="10" rowspan="3" class="border_left">&nbsp;</td>
<td width="680" colspan="3" align="left" valign="top" bgcolor="#666D2E">

Footer Include:

<td width="10" rowspan="3" class="border_right">&nbsp;</td>
<td height="15" colspan="3" align="center" valign="middle" bgcolor="#666D2E"><img src="images/main_spacer.gif" width="680" height="1"></td>
<td width="680" colspan="3" align="center" valign="middle" bgcolor="#666D2E" class="foot_text">
<?php require ("foot_table.php"); ?>
<?php mysql_close(); ?>

Thanks for any help anyone can offer...

05-21-2005, 12:15 AM
I say lose the tables and use divs, seeing as how tables are for data, not web design. 2nd, you might want to learn how to code a "True CSS Layout", it will avoid many mistakes with how tables are rendered in different browsers, because in a "True CSS Layout" you don't use tables unless you are displaying data. Internet Explorer has a problem with colspans and rowspans. For example, you can use tables for the tour dates and stuff since that is data, but for the rest it can be done in about 4 or 5 divs. www.htmldog.com is a good place to study about CSS, so is www.w3schools.com/css/