|
Hi all. I am very sad 
OK, I have the following HTML. A table with 4 rows, each row have variable cols and contains a table in the last column. Now my understanding is the the "inner" table should not affect how the outer table is "rendered". So what we have here is:
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td colspan=3>
<table width=100% border=1>
<tr>
<td width=100px></td><td></td>
</tr>
</table>
</td></tr>
<tr><td width=15px></td><td colspan=2>
<table width=100% border=1>
<tr>
<td width=100px></td><td></td>
</tr>
</table>
</td></tr>
<tr><td width=15px></td><td width=15px></td><td colspan=1>
<table width=100% border=1>
<tr>
<td width=100px></td><td></td>
</tr>
</table>
</td></tr>
<tr><td width=15px></td><td colspan=2>
<table width=100% border=1>
<tr>
<td width=100px></td><td></td>
</tr>
</table>
</td></tr>
</table>
Now if you will kind enough to paste that in a blank page, you will see all looks well, especially when resizing the browser sideways. IOW the left hand "padding" TD's stays fixed. All happy, all OK. Btw, I use IE6 XP SP1.
Now change the the width attribute of the first inner table's TD from 100px to 150px. This shouldn't have an effect on the the outer table, yet when you now resize the browser sideways, the padding becomes relative. Now HTF is this possible? If you are still interested at this stage, try playing around with the other widths, you will see even stranger things happening, eg some rows are fixed and some are "variable".
Is it me or is this just the way it is? It makes tables very inflexable indeed. [edit] The same page with different widths for the TD's renders correctly in Mozilla 1.1 and Netscape 6.2.3, not in IE 5 however. IE 0 - NS 1. [/edit]
All help appreciated. Cheers.
PS: Message intentionally posted in text.
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
Haven't tested the code, but btw never put </td> tags in begin of lines. There is a known IE rendering bug about it. Put </td> in tail instead.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
__Stephane Rodriguez__ wrote:
never put tags in begin of lines. There is a known IE rendering bug about it.
Didn't know that ( pretty gay IMHO ). Thanx 
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
leppie wrote:
never put tags in begin of lines. There is a known IE rendering bug about it.
I haven't had any problem with it yet... must be in older versions.
Word of the day: Rotundacrat
Extra Credit will be awarded for: Quasimobo...
|
|
|
|
|
The IE rendered is highly sensitive on the actual content inside the <td> ... </td> tags. In your sample, there is nothing, that's why from what I see IE behaves like mad. Usually web designers either fill table with content( ), or stretch a 1-pixel image (you know, that transp gif) to the actual width or height, so to achieve a pixel-perfect rendering.
Btw, using % in several places makes IE think that the overall outside table rendering relies on ratios rather than absolute values. That's probably why it changes with the IE client size.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
Final words, don't expect the same rendering between browsers.
Don't even expect the same rendering between two IE versions.
Don't even even expect the same rendering between a given IE build, and next.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
__Stephane Rodriguez__ wrote:
Final words, don't expect the same rendering between browsers.
Don't even expect the same rendering between two IE versions.
Don't even even expect the same rendering between a given IE build, and next.
Erm, doesn't that defeat the point of a standard, namely HTML? This is basic HTML, not even beyond IE 3/ Netscape 3.
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
leppie wrote:
Erm, doesn't that defeat the point of a standard, namely HTML? This is basic HTML, not even beyond IE 3/ Netscape 3.
That's not standard stuff. When it comes to user agent implementation of imbricated table rendering, the W3C has done a pretty great job of not taking into account all possible implementation details. Resulting in the mess we know today.
Besides that, the way you use "px" refers to CSS styles, which adds behaviours depending on the browser. It's better to put a number without suffix : no px, no pt, no em.
About Html, it's all about hints and tries. I am afraid you can spend a whole week on it.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
__Stephane Rodriguez__ wrote:
Besides that, the way you use "px" refers to CSS styles, which adds behaviours depending on the browser. It's better to put a number without suffix : no px, no pt, no em.
That doesnt do anything Same result.
__Stephane Rodriguez__ wrote:
About Html, it's all about hints and tries. I am afraid you can spend a whole week on it.
It's gonna take a shitload longer to "fix" this than the 3 weeks I have spend doing the site I am working.
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
Ok, papaoutage off.
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td colspan=3>
<table width=100% border=1>
<tr>
<td width=150><img src="transp.gif" width=150 height=1></td><td></td>
</tr>
</table></td></tr>
<tr><td width=15></td><td colspan=2>
<table width=100% border=1>
<tr>
<td width=100><img src="transp.gif" width=100 height=1></td><td></td>
</tr>
</table></td></tr>
<tr><td width=15></td><td width=15></td><td colspan=1>
<table width=100% border=1>
<tr>
<td width=100><img src="transp.gif" width=100 height=1></td><td></td>
</tr>
</table></td></tr>
<tr><td width=15></td><td colspan=2>
<table width=100% border=1>
<tr>
<td width=100><img src="transp.gif" width=100 height=1></td><td></td>
</tr>
</table></td></tr>
</table>
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
Hi Stephane
Sorry, I dont understand  . What will the "transparent" gifs do? Can I just use a 1x1 pixel gif?
Thanx
PS: TD is described as a content container, meaning it should be able to take any content within.
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
This trans.gif is a keyed 1-pixel GIF file. Stretching this image makes IE and other browsers act as if it was true content (in fact, images are content, like text). The fine thing is that if the image width and height are indicated, then IE and other browsers don't even have to figure out the actual content rect.
The keyed thing is to allow the GIF to be hidden (it doesn't even obscure the page background color).
This technique is used in many many websites.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
__Stephane Rodriguez__ wrote:
This trans.gif is a keyed 1-pixel GIF file. Stretching this image makes IE and other browsers act as if it was true content (in fact, images are content, like text). The fine thing is that if the image width and height are indicated, then IE and other browsers don't even have to figure out the actual content rect.
Thanx Stephane, I see that it works, but now IE uses the content to set the width of the TD. It seems that if TD width > content width (TD width=200) then it messes up ALL following TD width's. This is wrong behaviour. Why can ONE one tables TD's width affect the outer tables TD's width?
So what do I do if I need to put text inside and not just "blanks"?
This from the HTML 3.2 spec:
The minimum and maximum width of nested tables contribute to the minimum and maximum width of the cell in which they occur. Once the width requirements are known for the top level table, the column widths for that table can be assigned. This allows the widths of nested tables to be assigned and hence in turn the column widths of such tables. If practical, all columns should be assigned at least their minimum widths. It is suggested that any surplus space is then shared out proportional to the difference between the minimum and maximum width requirements of each column.
This confirms that any nested table has no effect on the outer table. So if the nested table's width is fixed then it affects the outer table's column, but if the nested table's width is 100% then it should fill the outer table's TD, to whatever size that maybe.
I have another idea that I am going to try with the transparent gif.
CHeers
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
leppie wrote:
So what do I do if I need to put text inside and not just "blanks"?
Usually web designers insert a fake row (1-pixel height) made of all the td columns with only stretched transp images as content. This sets the widths of all columns.
Then all "data" rows follow.
Same stuff for solving the height problem. It gets tricky when you try to solve pixel-perfectness for both width and height at the same time. That's why most web pages are in fact properly handled in the horizontal direction only.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
So I tried this, and it still does not render like it should!  Maybe its time for the suicide note 
If you look at this, the 3rd row becomes "variable". That is quite inconsistant. Now if we look at row 3 , we can see that:
Now we know the row width is 100%, then we 3 TD's namely 2 with width 15px, so we end up according to the spec with 100% - (2 x 15px) = nested table's width. But it does not work that way in IE.
Cheers
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
leppie wrote:
<tr><td width=15><img src="transp.gif" width=15 height=1></td><td width=15>
<img src="transp.gif" width=15 height=1></td><td colspan=1></td></tr></i>
If at least one of the TD width is not indicated, and the overall table width is not indicated (or indicated as %), then at least one of the column becomes "variable". In addition, the positioning of the actual columns depends on the browser, browser version, and so on.
To remove "variable"-size columns, you must indicate the width for all columns, and the table width. All in absolute pixels, not in %.
She's so dirty, she threw a boomerang and it wouldn't even come back.
|
|
|
|
|
<small><b>__Stephane Rodriguez__ wrote:</b></small>
<i>To remove "variable"-size columns, you must indicate the width for all columns, and the table width. All in absolute pixels, not in %.</i>
But I WANT that last column's width variable! Then I will place some more content in that variable width column.
<small><b>__Stephane Rodriguez__ wrote:</b></small>
<i>If at least one of the TD width is not indicated, and the overall table width is not indicated (or indicated as %), then at least one of the column becomes "variable". In addition, the positioning of the actual columns depends on the browser, browser version, and so on.</i>
That is correct, with one exception. All column's width's that has not been specified, will be divided among equally to take up the rest on the table's width.
So if we have a table with say 4 columns and 2 of thems with has been defined ( case one: 15px, case 2: 15% ) and the tables width is defined as 100%. Say the allowable width of the table is 100px, according to the browser.
Case 1:
The width of the 2 remaining columns = 35px each. (100 - (2 x 15))/2
Case 2:
The width of the 2 remaining columns = 35px each. (100 - (2 x 15))/2/100 x 100
Now we resize the browser to make table's width to 200px.
Case 1:
The width of the 2 remaining columns = 85px each. (200 - (2 x 15))/2
Case 2:
The width of the 2 remaining columns = 70px each. (100 - (2 x 15))/2/100 x 200
Now with this knowledge we implement the original problem (with the 1st TD of the nested table = 150px. Say the browser's calculated table width is 500px.
The TD's width of row one must be: 500px.
The last TD's width of row 2 must be: 485px. 500 - 15.
The last TD's width of row 3 must be: 470px. 500 - 15 - 15.
Now again we resize the browser. Table width now is 700px.
The TD's width of row one must be: 700px.
The last TD's width of row 2 must be: 685px. 700 - 15.
The last TD's width of row 3 must be: 670px. 700 - 15 - 15.
Now , the nested table's column's width could only affect the outer table if it was bigger than the outer table's column's width, which is <b>not</b> the case! Now paste the following and you will see what I mean. I added some CSS to illustrate the point. You will see table 2 & 4 does not render correctly. Try some more combinations, and things get more inconsistant.
Cheers
<HTML>
<HEAD>
<TITLE></TITLE>
<style type="text/css">
<!--
.OuterColumn {
background-color: #66FF00;
border: 1px solid #FF6633;
}
.NestedTable {
background-color: #FFCC99;
border: 1px solid #0033FF;
}
-->
</style>
</HEAD>
<body>
<table cellpadding="0" cellspacing="0" width=100%>
<tr>
<td colspan="3" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width="150">150</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td width="30" class="OuterColumn">30</td>
<td class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width=100%>
<tr>
<td colspan="3" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width="100">100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=150>150</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td width="30" class="OuterColumn">30</td>
<td class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width=100%>
<tr>
<td colspan="3" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width="100">100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td width="30" class="OuterColumn">30</td>
<td class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=150>150</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width=100%>
<tr>
<td colspan="3" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width="100">100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td width="30" class="OuterColumn">30</td>
<td class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=100>100</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30" class="OuterColumn">30</td>
<td colspan="2" class="OuterColumn"><table width="100%" border="1" class="NestedTable">
<tr>
<td>variable</td>
<td width=150>150</td>
</tr>
</table></td>
</tr>
</table>
</body>
</HTML>
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
Using an absolute width (100px) in the inner table overrides the relative setting of the outer table (100%). The padding seems to adjust to accomodate the absolute setting.
Word of the day: Rotundacrat
Extra Credit will be awarded for: Quasimobo...
|
|
|
|
|
Roger Wright wrote:
Using an absolute width (100px) in the inner table overrides the relative setting of the outer table (100%).
Its the other way around....  Have a closer look again at the HTML. As it is in my 1st post, it renders correctly, but changing one width (the 1st one), it messes up the rest. So we will have the following and comapre that to the first post. VS.NET added all the """'s and removed the "px", but the effect is the same. I added some text for clarity.
Maybe not a bug, but a serious flaw if you ask me
Before you criticize a man, walk a mile in his shoes. That way, when you do criticize him, you'll be a mile away and have his shoes.
|
|
|
|
|
In the profile-upload/upload-include.asp file:
Class FileUploader
................
Public Property Get Form(sIndex)
Form = ""
If mcolFormElem.Exists(LCase(sIndex)) Then Form = mcolFormElem.Item(LCase(sIndex))
End Property
..................
End Class
Can someone explain to me what that underlined parts mean?
And in photos/upload-photos.asp file:
set uploader = new fileuploader
if uploader.form("action") = "add"
uploader.form("description");
How can these be done?Are there any linkages?
I hope you know my meaning.
Thanks.
this is my signature for forums quoted from shog*9:
I can't help but feel, somewhere deep within that withered, bitter, scheming person, there is a small child, frightened, looking a way out.
|
|
|
|
|
Hiya,
I have a problem with CreateObject. I'm writing a webapp for the company
intranet. All user PC's have office 97 installed running on an NT 4
platform, the servers don't have office installed.
One function of my app is that it generates an Excel chart. It does this
using client-side VBScript. On my PC, when I execute the instruction:-
Set xlApp = CreateObject("Excel.Application")
Excel loads into memory (confirmed by checking Task Manager)
On any other PC (well, 3 others I have tried) Excel doesn't load. Any ideas
why?
Cheers,
Rob
|
|
|
|
|
|
Cheers for the quick response. The setting that should have enabled this to work is:-
Initialise and script ActiveX controls not marked as safe.
By default this is set to Disable. I had already set it to Enable but alas, no joy.
|
|
|
|
|
Hi, everyone!
I want to let user use Web to transfer their file
from local machine to a remote site. I do not know
how to use JSP to do that.
Where can I get some sample codes?
Cheers,
George
|
|
|
|
|
I'm not sure if the solution to my problem would actually be a web programmer's job, but I'm hoping that one of you may have had a similar need. Here it is:
I am setting up wireless internet for a hotel major hotel chain. Only one computer (one of the hotel's servers) will actually have the wireless modems, but will supply internet for each room. The ideal situation is this: 1-The user plugs their computer into the network jack (no internet access at this point). 2-They open up their preferred browser and instead of their homepage, it will display a page on our internal network. 3-They will go through a process to activate their room.
The problem that I have is dsplaying our page instead of their homepage. How would I intercept this? Would I have to write a pseudo HTTP server?
Thanks,
Josh Koppang
Wiacomm, Inc.
There's a fine line between confidence and arrogance.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
