PHP Spaces.

Manat

Hello All

I am currently creating a PHP Menu system for our site.
And I am having a problem which I cannot seem to solve.

The menu system is that like the one on www.mattel.com
It has a Level1 Menu and A Level2 Menu, where depending on which menu item you click on Level1, that corresponding Level2 Menu will show up.

I have the code, but the problem is that I have menu items in one <tr>, like Level1 in one TR and Level two in the next TR.

The problem is the Menu Items, each Menu item has a gap between the Next Menu Item, and also another gap between the two TRs, so a gap both vertically and horizontally. And that is for each and every one Menu Item, a gap between the next.

The Level2 TR is in a $tr variable, and I do a print $tr; which executes in an If statement.

Table Border is 0, cellpadding and cellspacing are also set to zero.
The PHP Code shows no whitespace code between each menu item, like nbsp; or anything else at all.

I checked the View Source and the returned HTML also shows nothing between each menu item that would produce whitespaces.

Also, each link has a weird border around them, even though border is set to zero.

Each Img Src is in an <a Href tag, however I took out all the hrefs and still the gaps were there, just without the weird borders.

I put them in TDs, out of TDs, still no change.

Can anyone point me into the right direction?
This is really frustrating.

Thank You all in advance for any help.
🙂

wilsonodk

Do you have the border attribute of the img tag set to 0?

Also, some code would be helpful, both the PHP and HTML output.

Sometimes browsers view whitespace in tables oddly.
Try setting width and height attributes of the td tags to exactly match their content.

Manat

Thanks, it's semi-fixed.
I set the image borders to zero, even though the default should be zero, but anyhow 😕

So putting the image borders to zero took out those weird borders that were showing, but the spaces still remain.

There must be something else, for the spaces.
Any idea, here is the Level1 Code:

</tr>
<?php
print $tr;
?>

$tr is a variable containing Level2 menu, but even without the $tr, the above still has spaces.

Any help would be appreciated, thanks

gonsman

I always find it useful to never have any spaces immediately following the <td> and immediately before the </td>. Anything inbetween these two tags is "sacred" and will act differently in different browsers. Spaces anywhere else should not effect anything. So you would want to remove any blank spaces in your cells:

Sometimes it helps also to use "nowrap" (eg. <td nowrap>) because if you have more than one thing in a cell it may wrap (this inludes spaces), especially if you have the width set to less than the space needed for the content.

You also set your width to "1" which might cause the whitespace horizontally. I generally use images to set the width and height of cells because each browser interperets these values differently.

Also if you want the cells to only take up the space needed for the images don't set a width value of the table unless it is exactly the same as all of the images (EXACTLY THE SAME).

You should also be using "border=0" in the <table> tag not the <td>.

Whenever possible always set the width and height of images.

If I was to your level1, including the table, it would be like this (with the exception of the missing width and height values for the last three images, because i don't know them):

</table>

hope this helps,

-Sean

Manat

Ok, here is what happens.
I output Level1, everything is fine. No gaps, no whitespaces, it all looks good.

Then when I output Level2, both Menu Levels get distorted where whitespaces are appended in between certain menu items.

So, it's something PHP.

Below is the updated code:

<?php
$dir = $GET["dir"];
if ($dir=="about")
{
$tr = "<tr><td><a href=\"about1/history.php?dir=about\"><img src=\"images/$dir/$dir" . "01.gif\" border=\"0\"></a></td><td><a href=\"$dir/awards.php\"><img src=\"images/$dir/$dir" . "02.gif\" border=\"0\"></a></td><td><a href=\"$dir/wheretobuy.php\"><img src=\"images/$dir/$dir" . "03.gif\" border=\"0\"></a></td><td><a href=\"$dir/address.php\"><img src=\"images/$dir/$dir" . "04.gif\" border=\"0\"></a></td><td><a href=\"$dir/careers.php\"><img src=\"images/$dir/$dir" . "05.gif\" border=\"0\"></a></td></tr>";

}

if ($dir=="products")
{
$tr = "
<tr>
<td align=\"left\"> <a href=\"$dir/babytoys.php\"><img src=\"images/$dir/$dir" . "01.gif\"></a> <a href=\"$dir/preschool.php\"><img src=\"images/$dir/$dir" . "02.gif\"></a> <a href=\"$dir/micro.php\"><img src=\"images/$dir/$dir" . "03.gif\"></a> <a href=\"$dir/micro.php\"><img src=\"images/$dir/$dir" . "04.gif\"></a> <a href=\"$dir/menu2.php?dir=products\"><img src=\"images/$dir/$dir" . "05.gif\"></a> <img src=\"images/$dir/$dir" . "06.gif\">
<img src=\"images/$dir/$dir" . "_07.gif\"> </td>
</tr>
";
}

?>
<tr><td align="left" border="0" nowrap><a href="/alpha/menu2.php?dir=about"><img src="images/about_us_on.gif" width="61" height="21" border="0"></a></td><td align="left" border="0" nowrap><a href="/alpha/menu2.php?dir=products"><img src="images/products.gif" width="67" height="21" border="0"></a></td><td align="left" valign="top" border="0" nowrap><a href="/alpha/index.php?dir=kidscorner"><img src="images/kids_corner.gif" border="0" width="81" height="21"></a></td><td align="left" valign="top" border="0" nowrap><a href="/alpha/index.php?dir=newsmedia"><img src="images/news_media.gif" border="0" width="86" height="21"></a></td><td align="left" valign="top" border="0" nowrap><a href="/alpha/index.php?dir=customerservice"><img src="images/customerservice.gif" border="0" width="108" height="21"></a></td></tr>

<?php print $tr; ?>

And then, this page just includes it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

</body>
</html>

Any idea why this would happen anyone??
Thanks

gonsman

Since I don't know the sizes of the images you are pulling in from above and whether or not you need them to be alligned with the bottom, I don't know if this solution will work for you. All I did was put everything into one cell so no matter what, all of the images should be touching. Give it a try, I hope it is what you are looking for.

<?php

$dir = $GET["dir"];
if ($dir=="about")
{
$tr = "<tr>
<td align=\"left\" border=\"0\" nowrap><a href=\"about1/history.php?dir=about\"><img src=\"images/$dir/$dir" . "01.gif\" border=\"0\"></a><a href=\"$dir/awards.php\"><img src=\"images/$dir/$dir" . "02.gif\" border=\"0\"></a><a href=\"$dir/wheretobuy.php\"><img src=\"images/$dir/$dir" . "03.gif\" border=\"0\"></a><a href=\"$dir/address.php\"><img src=\"images/$dir/$dir" . "04.gif\" border=\"0\"></a><a href=\"$dir/careers.php\"><img src=\"images/$dir/$dir" . "05.gif\" border=\"0\"></a></td>
</tr>";
}

if ($dir=="products")
{
$tr = "<tr>
<td align=\"left\" border=\"0\" nowrap><a href=\"$dir/babytoys.php\"><img src=\"images/$dir/$dir" . "01.gif\"></a><a href=\"$dir/preschool.php\"><img src=\"images/$dir/$dir" . "02.gif\"></a><a href=\"$dir/micro.php\"><img src=\"images/$dir/$dir" . "03.gif\"></a><a href=\"$dir/micro.php\"><img src=\"images/$dir/$dir" . "04.gif\"></a><a href=\"$dir/menu2.php?dir=products\"><img src=\"images/$dir/$dir" . "05.gif\"></a><img src=\"images/$dir/$dir" . "06.gif\"><img src=\"images/$dir/$dir" . "_07.gif\"></td>
</tr>
";
}
?>

<?php print $tr; ?>