losing hair over doctype compliance and tables

T

TJ

Hi

I am pulling my hair out with doctype compliance inside Internet
Explorer 7. For the below HTML, why is the input box expanding past
the cell edge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table width=270 border=1>
<tr>
<td width=100>First Name:</td>
<td width=170><input type="text" style="width:100%;" /></
td>
</tr>
</table>
</body>
</html>
 
C

C A Upsdell

TJ said:
Hi

I am pulling my hair out with doctype compliance inside Internet
Explorer 7. For the below HTML, why is the input box expanding past
the cell edge.
Click to expand...

Because the contents of the table is wider than the table width you
specify. Remember that a table has, by default, cellspacing and
cellpadding. Remember that borders take up room.

You have one column of width 100, another of width 170, 3 pixels added
to the width for the borders, 16 pixels more (I think) for the default
cellspacing and cellpadding. Guess what: this is wider than 270
pixels. So something's got to give.
 
H

Harlan Messinger

TJ said:
Hi

I am pulling my hair out with doctype compliance inside Internet
Explorer 7. For the below HTML, why is the input box expanding past
the cell edge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table width=270 border=1>
Click to expand...

XHTML attribute values, like all XML attribute values, must be
quote-delimited. This isn't the cause of your problem (I think C.A.
answered that) but if you're concerned about document validity, fix this;
 
T

TJ

ok, I have simplified it to one cell only, I have set the cellpadding,
cellspacing and border to 0, I have set the table-layout to fixed.
But still the edge is cut off. Why is that?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table width=170 cellpadding=0 cellspacing=0 border=0 style="table-
layout:fixed">
<tr>
<td width=170>
<input class="text" type="text" style="width:100%;" />
</td>
</tr>
</table>
</body>
</html>
 
T

TJ

I have solved my problem by adding padding-right:4px to the table.
Also note that this does not work if you do not specify a unit. Once I
added px after the 4 then it worked.

The good old days of winging HTML is over : (

The full code is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">

input.text
{
border: #7b9ebd 1px solid;
width:100%;
}
table
{
padding-right:4px;
}
</style>
</head>
<body>
<table width="400px" class="tbl" cellpadding="0px"
cellspacing="0px" border="0px">
<tr>
<td width="100px">
<input class="text" type="text" />
</td>
<td width="100px">
<input class="text" type="text" />
</td>
<td width="100px">
<input class="text" type="text" />
</td>
<td width="100px">
<input class="text" type="text" />
</td>
</tr>
</table>
</body>
</html>
 
E

Els

TJ said:
ok, I have simplified it to one cell only, I have set the cellpadding,
cellspacing and border to 0, I have set the table-layout to fixed.
But still the edge is cut off. Why is that?
Click to expand...
<input class="text" type="text" style="width:100%;" />
Click to expand...

IIRC, I encountered the same problem back in 2005 (pre-IE7, forgot
which browsers). Since it was on an Intranet site, I can't go back and
check what exactly was the code I used, but I think I just made the
input styles width:99%; or something close to that. There's difference
between textarea and input in that respect too, where the vertical
scrollbar in textareas gets cut in some browsers too, so they may need
less than 99% width.
 
C

C A Upsdell

TJ said:
I have solved my problem by adding padding-right:4px to the table.
Also note that this does not work if you do not specify a unit. Once I
added px after the 4 then it worked.
Click to expand...

There is a lesson there I hope you have learned: with HTML, pixels are
assumed for sizes; with CSS, no unit is assumed, so you have to specify
the unit of measure (unless the value is zero). Unfortunately there is
a browser out there which wrongly assumes px for measurements if no unit
is specified, so it is easy to fall into the trap of forgetting the need
to specify the unit.
 
T

Toby A Inkster

C said:
with HTML, pixels are assumed for sizes; with CSS, no unit is assumed,
so you have to specify the unit of measure (unless the value is zero).
Click to expand...

In fact, with HTML you are not *allowed* to specify any units! You must
only specify a number or a percentage. The number is generally taken to
mean pixels, except in the case of font sizes, where it is a fairly
abstract integer from 1 to 7 meant to reference sizes defined by the
client.

So the OP's:

<td width="100px">

should be:

<td width="100">

Though as each of his table cells is the same width, then perhaps CSS
might be more appropriate:

td { width: 100px; }

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 20 days, 17:26.]

Bottled Water
http://tobyinkster.co.uk/blog/2008/02/18/bottled-water/
 
D

dorayme

C A Upsdell said:
Because the contents of the table is wider than the table width you
specify. Remember that a table has, by default, cellspacing and
cellpadding. Remember that borders take up room.

You have one column of width 100, another of width 170, 3 pixels added
to the width for the borders, 16 pixels more (I think) for the default
cellspacing and cellpadding. Guess what: this is wider than 270
pixels. So something's got to give.
Click to expand...

Must be then that none of my mac browsers knows when to give in.
<g>.

Even fixing the poor markup for syntax, giving border of 50px,
never mind, 1 miserable one, the input stays inside the cell.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
Having trouble centering contents of td ? 3
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Javascript DOM 1
Need help with <rowspan> in an HTML table 1
Script to send email not working 1
Sort by number of characters 1

Members online

Total: 78 (members: 4, guests: 74)
Robots: 360

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top