Stylesheets - Why <intput> tag overwrite the <td> tag

Author

Why <intput> tag overwrite the <td> tag

2005-10-06, 6:39 pm

I have a very sime html table like
<html><head><title>My Table</title>
<style>
input { margin: 0; padding: 0; border-width: 0;
text-indet: 0; text-align: left }
</style></head><body>

<table border="1" width="100%">
<caption>Table Title</caption>
<tr>
<th width="25%">Col1></th>
<th width="25%">col2</th>
<th width="25%">col3</th>
<th width="25%">col4</th>
</tr>

<tr>
<td width="25%">
<input type="text" name="name1" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name2" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name3" value="" size="2" />
</td>
<td width="25%">
<input type="text" name="name4" value="" size="2" />
</td>
</tr>

</table></body></html>

Everything is fine, except the table width is over 100% of window
browser width, the browser auto have a horizontal scroll bar at bottom.
So I can only see 80% of the table, need to scroll the horizontal scroll
bar right and left.

I have 17" LCD screen with 1280x1024 resolution, it is wide enough
for a such small table maximum length only 8 characters.

If I take out all the <input> tags inside the <td> tags, then I got
exactly what I want, 100% table show on the browser window without the
horizontal scrolling bar.

Why the <input> tag increase the width of <td> tag?
How can I see the 100% of table on browser window?

Thank Q very much in advance!

P.S. the reason I posted this in XML group.
Because this is XSLT convert from XML to HTML

Xandax

2005-10-06, 6:39 pm

RC skrev:

> I have a very sime html table like
> <html><head><title>My Table</title>
> <style>
> input { margin: 0; padding: 0; border-width: 0;
> text-indet: 0; text-align: left }
> </style></head><body>
>
> <table border="1" width="100%">
> <caption>Table Title</caption>
> <tr>
> <th width="25%">Col1></th>
> <th width="25%">col2</th>
> <th width="25%">col3</th>
> <th width="25%">col4</th>
> </tr>
>
> <tr>
> <td width="25%">
> <input type="text" name="name1" value="" size="2" />
> </td>
> <td width="25%">
> <input type="text" name="name2" value="" size="2" />
> </td>
> <td width="25%">
> <input type="text" name="name3" value="" size="2" />
> </td>
> <td width="25%">
> <input type="text" name="name4" value="" size="2" />
> </td>
> </tr>
>
> </table></body></html>
>
> Everything is fine, except the table width is over 100% of window
> browser width, the browser auto have a horizontal scroll bar at bottom.
> So I can only see 80% of the table, need to scroll the horizontal scroll
> bar right and left.
>
> I have 17" LCD screen with 1280x1024 resolution, it is wide enough
> for a such small table maximum length only 8 characters.
>
> If I take out all the <input> tags inside the <td> tags, then I got
> exactly what I want, 100% table show on the browser window without the
> horizontal scrolling bar.
>
> Why the <input> tag increase the width of <td> tag?
> How can I see the 100% of table on browser window?
>
> Thank Q very much in advance!
>
> P.S. the reason I posted this in XML group.
> Because this is XSLT convert from XML to HTML

Could it have something to do with your additional > after Col1 in this
line:
<th width="25%">Col1></th>
Otherwise, I don't seem to have any problem viewing the table in any
resolution.

Beauregard T. Shagnasty

2005-10-06, 6:39 pm

Xandax wrote:

> RC skrev:
>

Sime? Simple?
[color=darkred]

text-indet is not valid CSS.
[color=darkred]

The extra > makes no difference to my browser.
[color=darkred]
> Could it have something to do with your additional > after Col1 in this
> line:
> <th width="25%">Col1></th>
> Otherwise, I don't seem to have any problem viewing the table in any
> resolution.

I see it functioning correctly, even after I removed the invalid CSS
(and that > ). Firefox 1.0.7

Methinks the OP is not telling the whole story. URL please?

--
-bts
-When motorcycling, never follow a pig truck

Jim Moe

2005-10-06, 6:39 pm

RC wrote:
> I have a very sime html table like
> [...]
> Everything is fine, except the table width is over 100% of window
> browser width, the browser auto have a horizontal scroll bar at bottom.
> So I can only see 80% of the table, need to scroll the horizontal scroll
> bar right and left.
>
It works fine here even after adding a DOCTYPE. Mozilla v1.7.12.
What browser are you using?
Post an URL demonstrating the problem.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)