Member Avatar for HLA91

Hi all

I made this table and it was working fine until I went to write in the bar at the bottom (where all the &nbsp are). When I am writing when the text reaches the edge of the table on the right instead of dropping underneath like it did in the main window it forces the border to expand which messes up the way the main window looks. What can I do to rectify this and is there a way to lock the table so it doesn't shift like this? Here is the code

<html>
<head>
<title>Photo Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../stylesheet.css" />
</head>
<body  link="blue" alink="blue" vlink="blue">
<table border="2" height="100%" width="100%" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="43" width="838" valign="top"> 
<p align="center">
<img border=0 src="photogallery.gif" alt="Photo Gallery" width="300" height="52"></td>
</tr>
<tr>
<td width="103" height="314" valign="top" rowspan="3"> 
<p><font face="Arial Unicode MS"><a href="http://www.praytotherock.co.nr">Home</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/photogallery/index.php">Photo Gallery</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://s4.invisionfree.com/Pray_to_the_rock/index.php">Forum</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/links.php">Interesting Sites</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://www.emailmeform.com/fid.php?formid=3180" target="_new">Contact Us</a></font></p>
<br /><p><font face="Arial Unicode MS">
<a href="http://harang.freehostia.com/weather.php">Weather</a></font></p>
<br /><br />
<br /><p align="center"></a></p><br /></td>
<td width="729" height="117" valign="top" colspan="2"> 
<font face="Arial Unicode MS">Please click on the link relevant to the photos 
you would like to view. If you have any photos you would like me to add then 
feel free to send them to me at: praytotherock@hotmail.co.uk </font>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Trebanog/album/index.html">Trebanog</a> - 
Rhondda Cynon Taff, South Wales</font></p>
<p>&nbsp;</p>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Three%20Cliffs%20Bay/album/index.html">Three 
Cliffs Bay</a> - Swansea, South Wales</font></p>
<p>&nbsp;</p>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Penallta/album/index.html">Penallta</a> - 
Caerphilly, South Wales</font></td>
</tr>
<tr>
<td width="331" height="1" valign="middle" align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
</tr>
</table><div id="footer">
    All contents of this site &copy; 2007 Harry Angell</div>
</body>
</html>

Many Thanks
HLA91

  • 2 Contributors
  • 6 Replies
  • 206 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MattEvans
Member Avatar for MattEvans

That last cell ( the one with the &nbsp; ) should be colspan = 2, otherwise you'll have a mismatch in your columns per row...

It doesn't need a width either; it will inherit the 'correct' width automatically...

I can't really see the problem you described, but changing that cell's attributes to:

<td colspan="2" height="1" valign="middle" align="center">

Does at least make the page look the same on the browsers I test with (Opera 9, Firefox 2, IE6)

Member Avatar for HLA91

I tried what you said and it worked fine thanks but what happens is that when I am typing in that cell when the typing reaches the end instead of going on to the next line it expands the cells width. I am using front page if that makes any difference, and I posted in another forum and nobody can figure out why the cell expands like that. Oh and I use Mozilla Firefox.

Member Avatar for MattEvans

Hm. I still can't see the problem you describe... there is another span discrepancy by the way:

<td width="103" height="314" valign="top" rowspan="[B]3[/B]">

should be

<td width="103" height="314" valign="top" rowspan="[B]2[/B]">

As for the expansion of the cell; for me it only expands vertically (upwards), which would be normal considering the content of the cell changes. What do you want it to do? it should be possible to force it not to expand upwards (stay at a fixed height) if that's what you want; but is it?

If you use &nbsps; they can have weird effects, in that they can prevent a line breaking, meaning it HAS to break layout; but only if they are interspersed heavily in a bit of text (i.e. only if every space in that text is replaced with an nbsp entity).

Quick question; is the problem related to the cell expanding outwards (i.e. making the table expand larger than the width of the page ), or is it expanding into the table (i.e. eating a proportion of the navigation bar to the left) ?

Otherwise, can you post a screenshot to this thread highlighting what the problem is?

Member Avatar for HLA91

The problem has changed now, when you are writing on the first line it will automatically drop underneath but then when you are writing on the second line the navigation panel is closing up and as you near the edge on the right the table expands width ways so two problems are arising. For a screen shot go to http://i193.photobucket.com/albums/z139/HLA91/daniweb.jpg

Thanks
HLA91

Member Avatar for MattEvans

The posted code goes a fair deal of the way to solving the problem. Try it out, the important changes are removing conflicting width/height attributes. For example (this isnt from your code, but it serves to demonstrate):

<table width="100%">
<tr>
<td width="200px">&nbsp;</td>
<td width="400px">&nbsp;</td>
</tr>
</table>

This configuration, although not strictly an error, doesn't make sense unless the sceen is exactly 600 pixels wide. Assuming only the 200px setting is necessary (for a fixed width column), the 400px setting is either redundant (if the screen is 600pixels wide), or it conflicts with the implied table total width ( all rows must fill this width ) being 100% of the screen..

Removing all such conflicts from your code will prevent the bottom cell from eating width from the sidebar on the left; in frontpage livepreview though; you will still be able to see the width of the whole table fluctauate very, very slightly as text is entered (this is more visible when the cell is aligned to the center, strangely enough). Personally, I would put this down to frontpage's HTML editing controls rather than anything else, and in any case, the difference between the table width for two different pieces of text, even in frontpage, is so minimal, it's only noticeable when viewed as a change.

Ok, I'm posting code modified with correct col/rowspans and removal of conflicting width/height values. Beyond what I've mentioned, I'd advise using a modern document type definition, and then using CSS width/height/valign/font attributes instead of attributes on the table cells and font tags. It doesn't make any functional difference in this case, but it can be useful in minimizing the density of markup, and especially if you have more than one page with the same 'style'.

More info on going over to XHTML transitional (personally recommended doctype):

http://japan-interface.co.uk/webdesign/tutorials/xhtml.html
http://www.w3.org/TR/xhtml1/#xhtml

<html>
<head>
<title>Photo Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../stylesheet.css" />
</head>
<body  link="blue" alink="blue" vlink="blue">
<table border="2" height="100%" width="100%" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="43" valign="top"> 
<p align="center">
<img border=0 src="photogallery.gif" alt="Photo Gallery" width="300" height="52"></td>
</tr>
<tr>
<td width="103" valign="top" rowspan="2"> 
<p><font face="Arial Unicode MS"><a href="http://www.praytotherock.co.nr">Home</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/photogallery/index.php">Photo Gallery</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://s4.invisionfree.com/Pray_to_the_rock/index.php">Forum</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/links.php">Interesting Sites</a></font></p>
<br /><p><font face="Arial Unicode MS"><a href="http://www.emailmeform.com/fid.php?formid=3180" target="_new">Contact Us</a></font></p>
<br /><p><font face="Arial Unicode MS">
<a href="http://harang.freehostia.com/weather.php">Weather</a></font></p>
<br /><br />
<br /><p align="center"></a></p><br />
</td>
<td valign="top" colspan="2"> 
<font face="Arial Unicode MS">Please click on the link relevant to the photos 
you would like to view. If you have any photos you would like me to add then 
feel free to send them to me at: praytotherock@hotmail.co.uk </font>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Trebanog/album/index.html">Trebanog</a> - 
Rhondda Cynon Taff, South Wales</font></p>
<p>&nbsp;</p>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Three%20Cliffs%20Bay/album/index.html">Three 
Cliffs Bay</a> - Swansea, South Wales</font></p>
<p>&nbsp;</p>
<p><font face="Arial Unicode MS">
<a href="http://harang.byethost7.com/Penallta/album/index.html">Penallta</a> - 
Caerphilly, South Wales</font></td>
</tr>
<tr>
<td colspan="2" valign="middle" align="center">
[type stuff here]
</td>
</tr>
</table><div id="footer">
    All contents of this site &copy; 2007 Harry Angell</div>
</body>
</html>
Member Avatar for MattEvans

Another thing, if you do type one solid line of characters, like in the example screenshot you posted; the cell HAS to expand to include the text..

You can avoid this, in a somewhat hacky way, but only in the following browsers (tested) Opera 9, Firefox 2. It does not work in Internet Explorer 6 ( and thus not frontpage versions that use IE6's rendering component for preview ):

<td colspan="2" valign="middle" align="center">
<div style="width:inherit;overflow:hidden;">
[long_line_of_non_breaking_characters]
</div>
</td>

This will essentially, chop off any characters that continue in a line that exceeds the current ( i.e. 100% of page ) width of the table.

Considering; most text has some breaking characters (i.e. spaces) this isn't normally a problem... O_o

Make the changes in my last post first; they are more important..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.