Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2004
    Thanked 0 Times in 0 Posts

    Column Align Prob - Looks OK on Mac, but screwed on PC

    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...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    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/


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts