943,935 Members | Top Members by Rank

Ad:
May 12th, 2007
0

Table width

Expand Post »
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 and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Photo Gallery</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link rel="stylesheet" href="../stylesheet.css" />
  6. </head>
  7. <body link="blue" alink="blue" vlink="blue">
  8. <table border="2" height="100%" width="100%" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
  9. <tr>
  10. <td colspan="3" height="43" width="838" valign="top">
  11. <p align="center">
  12. <img border=0 src="photogallery.gif" alt="Photo Gallery" width="300" height="52"></td>
  13. </tr>
  14. <tr>
  15. <td width="103" height="314" valign="top" rowspan="3">
  16. <p><font face="Arial Unicode MS"><a href="http://www.praytotherock.co.nr">Home</a></font></p>
  17. <br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/photogallery/index.php">Photo Gallery</a></font></p>
  18. <br /><p><font face="Arial Unicode MS"><a href="http://s4.invisionfree.com/Pray_to_the_rock/index.php">Forum</a></font></p>
  19. <br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/links.php">Interesting Sites</a></font></p>
  20. <br /><p><font face="Arial Unicode MS"><a href="http://www.emailmeform.com/fid.php?formid=3180" target="_new">Contact Us</a></font></p>
  21. <br /><p><font face="Arial Unicode MS">
  22. <a href="http://harang.freehostia.com/weather.php">Weather</a></font></p>
  23. <br /><br />
  24. <br /><p align="center"></a></p><br /></td>
  25. <td width="729" height="117" valign="top" colspan="2">
  26. <font face="Arial Unicode MS">Please click on the link relevant to the photos
  27. you would like to view. If you have any photos you would like me to add then
  28. feel free to send them to me at: praytotherock@hotmail.co.uk </font>
  29. <p><font face="Arial Unicode MS">
  30. <a href="http://harang.byethost7.com/Trebanog/album/index.html">Trebanog</a> -
  31. Rhondda Cynon Taff, South Wales</font></p>
  32. <p>&nbsp;</p>
  33. <p><font face="Arial Unicode MS">
  34. <a href="http://harang.byethost7.com/Three%20Cliffs%20Bay/album/index.html">Three
  35. Cliffs Bay</a> - Swansea, South Wales</font></p>
  36. <p>&nbsp;</p>
  37. <p><font face="Arial Unicode MS">
  38. <a href="http://harang.byethost7.com/Penallta/album/index.html">Penallta</a> -
  39. Caerphilly, South Wales</font></td>
  40. </tr>
  41. <tr>
  42. <td width="331" height="1" valign="middle" align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  43. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  44. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  45. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  46. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  47. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  48. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  49. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  50. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  51. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
  52. </tr>
  53. </table><div id="footer">
  54. All contents of this site &copy; 2007 Harry Angell</div>
  55. </body>
  56. </html>
Many Thanks
HLA91
Last edited by HLA91; May 12th, 2007 at 2:46 pm.
Similar Threads
Reputation Points: 7
Solved Threads: 2
Junior Poster
HLA91 is offline Offline
177 posts
since Oct 2006
May 12th, 2007
0

Re: Table width

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:
HTML and CSS Syntax (Toggle Plain Text)
  1. <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)
Last edited by MattEvans; May 12th, 2007 at 3:33 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
May 12th, 2007
0

Re: Table width

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.
Reputation Points: 7
Solved Threads: 2
Junior Poster
HLA91 is offline Offline
177 posts
since Oct 2006
May 13th, 2007
0

Re: Table width

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="3">
should be
<td width="103" height="314" valign="top" rowspan="2">
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?
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
May 13th, 2007
0

Re: Table width

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/z...91/daniweb.jpg

Thanks
HLA91
Reputation Points: 7
Solved Threads: 2
Junior Poster
HLA91 is offline Offline
177 posts
since Oct 2006
May 13th, 2007
0

Re: Table width

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):
HTML and CSS Syntax (Toggle Plain Text)
  1. <table width="100%">
  2. <tr>
  3. <td width="200px">&nbsp;</td>
  4. <td width="400px">&nbsp;</td>
  5. </tr>
  6. </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/webdesi...als/xhtml.html
http://www.w3.org/TR/xhtml1/#xhtml

HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Photo Gallery</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link rel="stylesheet" href="../stylesheet.css" />
  6. </head>
  7. <body link="blue" alink="blue" vlink="blue">
  8. <table border="2" height="100%" width="100%" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
  9. <tr>
  10. <td colspan="3" height="43" valign="top">
  11. <p align="center">
  12. <img border=0 src="photogallery.gif" alt="Photo Gallery" width="300" height="52"></td>
  13. </tr>
  14. <tr>
  15. <td width="103" valign="top" rowspan="2">
  16. <p><font face="Arial Unicode MS"><a href="http://www.praytotherock.co.nr">Home</a></font></p>
  17. <br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/photogallery/index.php">Photo Gallery</a></font></p>
  18. <br /><p><font face="Arial Unicode MS"><a href="http://s4.invisionfree.com/Pray_to_the_rock/index.php">Forum</a></font></p>
  19. <br /><p><font face="Arial Unicode MS"><a href="http://harang.freehostia.com/links.php">Interesting Sites</a></font></p>
  20. <br /><p><font face="Arial Unicode MS"><a href="http://www.emailmeform.com/fid.php?formid=3180" target="_new">Contact Us</a></font></p>
  21. <br /><p><font face="Arial Unicode MS">
  22. <a href="http://harang.freehostia.com/weather.php">Weather</a></font></p>
  23. <br /><br />
  24. <br /><p align="center"></a></p><br />
  25. </td>
  26. <td valign="top" colspan="2">
  27. <font face="Arial Unicode MS">Please click on the link relevant to the photos
  28. you would like to view. If you have any photos you would like me to add then
  29. feel free to send them to me at: praytotherock@hotmail.co.uk </font>
  30. <p><font face="Arial Unicode MS">
  31. <a href="http://harang.byethost7.com/Trebanog/album/index.html">Trebanog</a> -
  32. Rhondda Cynon Taff, South Wales</font></p>
  33. <p>&nbsp;</p>
  34. <p><font face="Arial Unicode MS">
  35. <a href="http://harang.byethost7.com/Three%20Cliffs%20Bay/album/index.html">Three
  36. Cliffs Bay</a> - Swansea, South Wales</font></p>
  37. <p>&nbsp;</p>
  38. <p><font face="Arial Unicode MS">
  39. <a href="http://harang.byethost7.com/Penallta/album/index.html">Penallta</a> -
  40. Caerphilly, South Wales</font></td>
  41. </tr>
  42. <tr>
  43. <td colspan="2" valign="middle" align="center">
  44. [type stuff here]
  45. </td>
  46. </tr>
  47. </table><div id="footer">
  48. All contents of this site &copy; 2007 Harry Angell</div>
  49. </body>
  50. </html>
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
May 13th, 2007
0

Re: Table width

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 ):

HTML and CSS Syntax (Toggle Plain Text)
  1. <td colspan="2" valign="middle" align="center">
  2. <div style="width:inherit;overflow:hidden;">
  3. [long_line_of_non_breaking_characters]
  4. </div>
  5. </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..
Last edited by MattEvans; May 13th, 2007 at 5:50 pm. Reason: lots
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: IE not showing all links as clickable
Next Thread in HTML and CSS Forum Timeline: FireFox not showing CSS in Strict Mode





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC