Website Layout Help

tombull82 · 26-05-2010 10:59pm #1

Hi all

I have just setup a new classifieds website, the problem is that my lists are totally off when my site is viewed in Safari..

I have checked my site with IE 7 & 8, FF, Chrome and Opera, it seems fine in all these but as soon as I view it in Safari my "lists" seem to display to the right of the screen and cover over my categories.

I altered my some of my sites layout files to get it the way I wanted and mainly used Firefox's "Firebug" pluggin for viewing the code while doing this.

I have found a way to fix this issue but It throws all the other browsers out then, :-(

I really need help on this as I just cant get any good of it.

FYI I have no programming of or design training, Its all trial and error when when I need to change my code/scripts so please be patient with me.

tombull82 · 27-05-2010 5:08am

Hi All

I have located my Problem down to this file. Can someone give me any indication as to if anything looks "off" within this ??

Thanks Very much

[PHP]<?php // The category boxes only take the full width if there are at least $this->categoryColumnsNum boxes:
$tableWidth = "100%";
$categories =& $this->get("categories");
$catNum=count($categories);
$categoryColumnsNum =& $this->get("categoryColumnsNum");
$oneCatWidth = 100/$categoryColumnsNum;
$alternatingColorsNum = 4; // one different color for each column
?>
<?php if( $catNum ): /* if there are category boxes at all */ ?>
<table cellspacing='0' class='catGrid' width='<?php echo $tableWidth ?>'>
<?php for( $i=0; $i<$catNum; $i++ ): ?>

<div class="grid_4">
<div class="category-image-block">
<a href="<?php echo $categories[$i]->link ?>"><img src="<?php echo $categories[$i]->picture ?>" alt="<?php echo $categories[$i]->title ?>" class="thumbnail" height="100" width="150" />
</a>

</div>
<p class="category">
<a href="<?php echo $categories[$i]->link ?>"><?php echo $categories[$i]->title ?> [<?php echo $categories[$i]->itemNum ?>]</a>
</p>

</div>
<?php endfor; ?>
<?php endif; ?>
<?php if( $catNum ): /* if there are category boxes at all */ ?>
<table cellspacing='0' class='catGrid' width='<?php echo $tableWidth ?>'>
<?php for( $i=0; $i<$catNum; $i++ ): ?>
<?php if( ($i % $categoryColumnsNum) == 0 ): /* new row necessary */ ?>
<tr>
<?php endif; ?>
</div>
<?php if($categories[$i]->description): ?>
<div class='catDescription'>
<?php endif; ?>
</td>
<?php if( (($i+1) % $categoryColumnsNum) == 0): /* row end necessary */ ?>
</tr>
<?php endif; ?>
<?php endfor; ?>
<?php if( ($colspNum = $i % $categoryColumnsNum) > 0): /* filling the rest of the row with an empty td */ ?>
<td colspan='<?php echo $colspNum ?>'></td>
</tr>
<?php endif; ?>
</table><br />
<?php endif; ?>

<?php // displaying the advertisements if there are any:
$this->displayContent("advertisementList");
?>[/PHP]

27-05-2010 8:37am

Post a link to the live site.

TheWaterboy · 27-05-2010 9:19am

Without seeing a link its hard to see whats going on but alarm bells start to ring when I see div tags within table tags!

onemorechance · 27-05-2010 10:58am

Your HTML tags are all off. You need to ensure that they are nested correctly. In your code snippet, you have two opening <table> tags, but only one closing </table> tag. There are similar issues with your <div> tags. Indent your code to make it easier to read and check that all tags are closed.

<div>
    <table>
        <tr>
            <th></th>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</div>

In your example, you have created a <table>, then placed a <div> inside the table. <Table> content needs to be placed inside a <tr><th></th></tr> or <tr><td></td></tr>.

tombull82 · 27-05-2010 12:34pm

thanks guys, the site is www.adspace.ie its in my sig. I'll try tidy up these tags and see if it helps. Thanks

onemorechance · 27-05-2010 1:18pm

You should be careful about spamindexing in your meta tags. I'm not too into SEO, but it may have the opposite effect to what you want.

tombull82 · 27-05-2010 5:03pm

Thanks OMC,
I copied an pasted that from a meta tag generator site a while back but forgot to delete a lot of it. I have looked in page source and seen exactly how much is in it and definitely agree that its way too much, so it will have to go.

Anyone got any ideas on the Safari thing??

Thanks

onemorechance · 28-05-2010 12:29pm

It must be to do with the layout, order, nesting of your tables and divs. The way it is done is wrong, so you need to fix that first and it should solve your problems is Safari. I think you are just lucky that it works at all in the other browsers. Even if doing that does not fix the problem in Safari, which it should, it will be much easier to fix the problem if the tag layout is correct. You will only have more problems going forward if you tags are left this way.

tombull82 · 29-05-2010 5:03am

This is it now... Sadly did not fix my problem thought. :-(

[PHP] <?php // The category boxes only take the full width if there are at least $this->categoryColumnsNum boxes:
$tableWidth = "100%";
$categories =& $this->get("categories");
$catNum=count($categories);
$categoryColumnsNum =& $this->get("categoryColumnsNum");
$oneCatWidth = 100/$categoryColumnsNum;
$alternatingColorsNum = 4; // one different color for each column
?>
<?php if( $catNum ): /* if there are category boxes at all */ ?>
<table cellspacing='0' class='catGrid' width='<?php echo $tableWidth ?>'>
<?php for( $i=0; $i<$catNum; $i++ ): ?>

<div class="grid_4">
<div class="category-image-block">
<a href="<?php echo $categories[$i]->link ?>"><img src="<?php echo $categories[$i]->picture ?>" alt="<?php echo $categories[$i]->title ?>" class="thumbnail" height="100" width="150" />
</a>
</div>
<p class="category">
<a href="<?php echo $categories[$i]->link ?>"><?php echo $categories[$i]->title ?> [<?php echo $categories[$i]->itemNum ?>]</a>
</p>
</div>
<?php endfor; ?>
<?php endif; ?>
<?php if( $catNum ): /* if there are category boxes at all */ ?>
<table cellspacing='0' class='catGrid' width='<?php echo $tableWidth ?>'>
<?php for( $i=0; $i<$catNum; $i++ ): ?>
<?php if( ($i % $categoryColumnsNum) == 0 ): /* new row necessary */ ?>
<tr>
<?php endif; ?>

<?php if($categories[$i]->description): ?>
<div class='catDescription'></div>
<?php endif; ?>

<?php if( (($i+1) % $categoryColumnsNum) == 0): /* row end necessary */ ?>
</tr>
<?php endif; ?>
<?php endfor; ?>
<?php if( ($colspNum = $i % $categoryColumnsNum) > 0): /* filling the rest of the row with an empty td */ ?>
<td colspan='<?php echo $colspNum ?>'></td>

<?php endif; ?>
</table><br />
<?php endif; ?>

<?php // displaying the advertisements if there are any:
$this->displayContent("advertisementList");
?>

[/PHP]

tombull82 · 29-05-2010 5:16am

This is my Layout file.

You suggested my problem might I had a friend look at this and he said it looked OK but he said he would not exactly be very hot on code anyway's.

Can you notice out of place here??

Thanks alot.

[PHP]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="<?php echo $this->language ?>" dir="<?php echo $this->langDir ?>">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<base href='<?php echo $this->baseUrl ?>'>

<?php /* Search Engine Optimization section: */ ?>
<?php if( $this->get("customMetaTags") ): ?>
<?php echo $this->get("customMetaTags") ?>
<?php else: ?>
<title><?php echo $this->titlePrefix ?><?php if( $this->title ) echo ' - '.$this->title; ?></title>
<meta name='description' content='<?php echo $this->description ?>'>
<meta name='keywords' content='<?php echo $this->keywords ?>'>
<?php endif; ?>

<?php /* JavaScript section (without this, pages won't work properly!): */ ?>
<?php echo $this->jsIncludes /* includes external JavaScript and CSS files */ ?>
<?php echo $this->javaScript /* inserts internal JavaScrip code */ ?>
<?php echo $this->extraHead /* inserts the 'Additional HEAD content' from the Settings form */ ?>
</head>
<body bgcolor="#E9E9E9" text="#050505" link="#E54F00" vlink="#E54F00" alink="#E54F00">
<?php echo $this->extraBody /* inserts the 'Additional BODY content' from the Settings form */ ?>
<center><?php $this->displayContent("customListTop", putWhiteSpaceAbove) /* inserts custom lists where 'On the top of the page' has been selected in the 'Position' field */ ?></center>
<table width="990" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>

<td>

<table width="990" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<tr>

<td width="50%"><img aling="left" src='<?php echo $this->imagesDir ?>/adspace opp.png?logoImage'><div class="logo">



</div></td>

<td width="50%" align="right" valign="top">

<form method="POST" action="index.php" style="padding:0px; margin:0px;">
<input type='hidden' id='list' name='list' value='itemsearch'>
<input type='hidden' id='method' name='method' value='create'>

<table border="0" cellspacing="0" cellpadding="0" class="search" height="67">
<tr>
<td width="235" style="padding-left:70px; padding-top:23px;" valign="top"><input type="text" name="str" size="25" class="searchinput" value="Type something and hit enter !" onfocus= "if(this.beenchanged!=true) { this.value = ''}"
onblur="if(this.beenchanged!=true) { this.value='Type something and hit enter !' }"
onchange="this.beenchanged = true;" /></td>
</tr>
</table>
</form>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="bordercolor">

<table width="990" border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="<?php echo $this->imagesDir ?>/c_tl.png" alt="c_tl" /></td>
<td background="<?php echo $this->imagesDir ?>/c_t.png"><img src="<?php echo $this->imagesDir ?>/c_t.png" alt="c_t" /></td>
<td><img src="<?php echo $this->imagesDir ?>/c_tr.png" alt="c_tr" /></td>
</tr>
<tr>
<td background="<?php echo $this->imagesDir ?>/c_l.png"><img src="<?php echo $this->imagesDir ?>/c_l.png" alt="c_l" /></td>
<td class="tablebgcolor">

<table width="964" border="0" cellspacing="0" cellpadding="0" class="navbar">

<tr>

<td height="41">
<table width="964" border="0" cellspacing="0" cellpadding="0" class="navbar_ext" height="41" align="left">

<tr>

<td width="440"> <b><span class="clickstream"><?php if($this->get("navBar")): ?><?php echo $this->get("navBar") ?><?php endif; ?></span></b></td>

<td width="524" align="right">
<?php include $this->loadTemplate("menu_login.tpl.php"); /* This includes an other template file that contains the user menu points */ ?>
</td>

</tr>

</table>

</td>

</tr>

</table>
<table width="964" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="204" class="row2" valign="top" style="padding-top:10px;"><table width="204" border="0" cellspacing="0" cellpadding="0" align="center" class="reg_table" bgcolor="#FFFFFF">

<tr>

<td class="head2_reg" height="37">User Control Panel</td>

</tr>

<tr>

<td align="center"><table width="100%" border="0" cellpadding="4" cellspacing="0">

<tr>

<td valign="top" align="left">
<?php echo $this->userStatus ?>
<?php if( !empty($this->loginMenu["login"])): ?>
<form method='POST' action='index.php' id='gorumForm' ENCTYPE='multipart/form-data'>
<input type='hidden' id='list' name='list' value='user'>
<input type='hidden' id='method' name='method' value='login'>

<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td width="50">Username:</td>
<td><input type="text" size="10" name="name" class="logininput" /></td>
</tr>

<tr>
<td>Password:</td>
<td><input type="password" size="10" name="password" class="logininput" /></td>
</tr>
</table>
<br />

<table border="0" cellspacing="0" cellpadding="0">

<tr valign="top">

<td><input type="checkbox" name="rememberPassword" value="1" /></td>

<td><span class="smalltext">Log me on automatically next visit?</span></td>

</tr>

</table>

<br />

<input type="submit" value="Log In" name='gsubmit' class="button" />

</form>
<div style="padding:4px;"> » <a href="index.php?user/remind_password_form/">Forgot password</a><br />

» <a href='<?php echo $this->loginMenu["register"]["link"] ?>'>Registration</a></div>

<?php endif; ?>
<?php if( count($this->userMenu) ): ?>
<?php include $this->loadTemplate("menu_user.tpl.php"); /* This includes an other template file that contains the user menu points */ ?><?php endif; ?>
<?php if( count($this->adminMenu) ): ?>
<?php include $this->loadTemplate("menu_admin.tpl.php"); /* This includes an other template file that contains the user/admin menu points */ ?><?php endif; ?>
<?php if( count($this->categoryMenu) ): ?>
<?php include $this->loadTemplate("menu_category.tpl.php"); /* This includes an other template file that contains the category menu points */ ?><?php endif; ?>
<div style="padding:4px;"><?php if( isset($this->rssFeed) ): ?>
<?php foreach( $this->rssFeed as $item ): ?>
» <a href='<?php echo $item["link"] ?>' class='<?php echo $item["linkClass"] ?>'>
<?php echo $item["label"] ?></a><br />
<?php endforeach; ?><?php endif; ?></div>
<?php if( $this->ecommStatus): ?>
<div style="padding:4px; Color:blue;">» <?php echo $this->ecommStatus; ?></div>
<?php endif; ?>
</td>

</tr>

</table>

</td>

</tr>

</table><br />

<table width="204" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>

<td class="head2" height="36">Sponsor</td>

</tr>

<tr>

<td class="tablebgcolor"><img src="<?php echo $this->imagesDir ?>/spacer.gif" alt="" width="1" height="1" /></td>

</tr>

<tr>

<td align="center" class="row1">
<br />



<img src="<?php echo $this->imagesDir ?>/sidebanner.png" title="Advertisement" alt="Advertisement" />


<br />
<?php $this->displayContent("customListLeft") /* inserts custom lists where 'On the left side of the page' has been selected in the 'Position' field */ ?>
<br />

</td>

</tr>

<tr>

<td class="tablebgcolor"><img src="<?php echo $this->imagesDir ?>/spacer.gif" alt="" width="1" height="1" /></td>

</tr>

</table>

</td>

<td width="1" valign="top"><img src="<?php echo $this->imagesDir ?>/spacer.gif" alt="" width="1" height="1" /></td>

<td width="16" valign="top"><img src="<?php echo $this->imagesDir ?>/spacer.gif" alt="" width="16" height="6" /></td>

<td width="743" valign="top">

<img src="<?php echo $this->imagesDir ?>/spacer.gif" alt="" width="700" height="6" />
<table width="99%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><form method="post" name="jumpbox" action="./categories.php">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<?php if( $this->languageSelector): ?>

<?php echo $this->languageSelector ?>

<?php endif; ?>

</tr>

</table>

</form>

</td>

<td align="right"><form method="post" action="index.php" name="perpagebox">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<?php if( $this->themeSelector): ?>

<?php echo $this->themeSelector ?>

<?php endif; ?>

</tr>

</table>

</form>

</td>

</tr>

</table>
<br />

<br />
<?php if($this->infoText): ?><br /><center><div style="color:474747;font-size:22pt;">
<?php echo $this->infoText ?><br /></div></center>
<?php endif; ?>
<?php echo $this->extraTopContent /* inserts the 'Additional top content' from the Settings form */ ?>
<center><?php $this->displayContent("customListAboveContent", putWhiteSpaceAbove) /* inserts custom lists where 'Above content' has been selected in the 'Position' field */ ?></center>
<?php $this->displayContent() ?>
<center><?php $this->displayContent("customListBelowContent", putWhiteSpaceAbove) /* inserts custom lists where 'Below content' has been selected in the 'Position' field */ ?></center>
<?php echo $this->extraBottomContent /* inserts the 'Additional bottom content' from the Settings form */ ?>

<br />
<br />

</td>

</tr>

</table>

</td>
<td background="<?php echo $this->imagesDir ?>/c_r.png"><img src="<?php echo $this->imagesDir ?>/c_r.png" alt="c_r" /></td>
</tr>
<tr>

<td><img src="<?php echo $this->imagesDir ?>/c_bl.png" alt="c_bl" /></td>
<td background="<?php echo $this->imagesDir ?>/c_b.png"><img src="<?php echo $this->imagesDir ?>/c_b.png" alt="c_b" /></td>
<td><img src="<?php echo $this->imagesDir ?>/c_br.png" alt="c_br" /></td>
</tr>
</table>

</td>

</tr>

</table>
<p id="copyright" align="center">
<?php echo $this->versionFooter ?>
<div style="float:right;">2010 Copyright @: <a href="http://www.AdSpace.ie" target="_blank"><span class="os">AdSpace.ie</span> <span class="design">Classifieds</span></a></div>
</p>
<center><?php $this->displayContent("customListBottom", putWhiteSpaceAbove) /* inserts custom lists where 'On the bottom of the page' has been selected in the 'Position' field */ ?></center>
<?php echo $this->extraFooter /* inserts the 'Additional footer content' from the Settings form */ ?>
</body>

</html> [/PHP]

onemorechance · 31-05-2010 10:27am

Yes the nesting of the tags seems to be fine. Using the W3 validator, there are lots of mistakes in the HTML. Fix these and that should help. There are a few which say some <tr> tags are not closed correclty.

Line 274, Column 69: end tag for "TR" which is not finished </tr> ✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>
Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

Others are:

Line 51, Column 56: there is no attribute "ALING" … <td width="50%"><img aling="left" src='./themes/Photo_Box/images/ad…
To adding invalid attributes:

Line 66, Column 109: there is no attribute "HEIGHT" … <table border="0" cellspacing="0" cellpadding="0" class="search" height="67"> ✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

tombull82 · 01-06-2010 4:38pm

Thanks OMC

I am hoping to get a bit of time at this tomorrow.
I'll see if I can make sense of it. If not I'll probably have to get someone onboard to help sort it for me.

Thanks
Tom

DonkeyStyle \o/ · 02-06-2010 7:35am

What fixed it for me in Safari (Windows) was on line 312 of the live/end-result html

<table cellspacing='0' class='catGrid' width='100%' [COLOR="Blue"]style="clear: both;"[/COLOR]>

Add it inline or add this to your catGrid css class:

clear: both;

tombull82 · 03-06-2010 1:58am

DonkeyStyle \o/ wrote: »
What fixed it for me in Safari (Windows) was on line 312 of the live/end-result html
<table cellspacing='0' class='catGrid' width='100%' [COLOR="Blue"]style="clear: both;"[/COLOR]>
Add it inline or add this to your catGrid css class:
clear: both;

DonkeyStyle

with that 1 post you have solved something I have muddled over for hours...
where were you last week?????:D:D:D

Thank you very much that sorted my problem straight away...

Tom

Website Layout Help

Comments