 |  |  |  |  |  |  |  |
Table width
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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   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
Many Thanks
HLA91
I made this table and it was working fine until I went to write in the bar at the bottom (where all the   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)
HLA91
Last edited by HLA91; May 12th, 2007 at 2:46 pm.
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation: 
Solved Threads: 63
That last cell ( the one with the
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:
Does at least make the page look the same on the browsers I test with (Opera 9, Firefox 2, IE6)
) 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)
Last edited by MattEvans; May 12th, 2007 at 3:33 pm.
Plato forgot the nullahedron..
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.
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation:
Solved Threads: 63
Hm. I still can't see the problem you describe... there is another span discrepancy by the way:
should be
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  s; 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?
<td width="103" height="314" valign="top" rowspan="3"><td width="103" height="314" valign="top" rowspan="2">If you use  s; 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?
Plato forgot the nullahedron..
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
Thanks
HLA91
You know your a geek, if you introduce your wife as "mylady@home.wife"
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation:
Solved Threads: 63
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):
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)
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)
Plato forgot the nullahedron..
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation:
Solved Threads: 63
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 ):
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..
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)
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
Plato forgot the nullahedron..
|
Similar Threads
- table in php browser incompat. prob. (HTML and CSS)
- Website width (HTML and CSS)
- Help building Table, Images dont cleanly come together (HTML and CSS)
- html table to .csv (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: IE not showing all links as clickable
- Next Thread: FireFox not showing CSS in Strict Mode
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
