DOCTYPE XHTML breaks <input> tag styles

Forum Moderators: open

Message Too Old, No Replies

DOCTYPE XHTML breaks <input> tag styles

looks like IE browser bug(see sample) - any workaround?

cyclinder

9:41 pm on Jan 12, 2007 (gmt 0)

The following page looks terrible in IE, but ok in Mozilla.

remove the first line (talking about XML) and it becomes just fine.

Looks like IE stops interpreting "style" of <input> correctly once
XHTML is applied, but I still need the solution for the input
to take the full space of table cell with the first line on.

Any solutions/ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>

<td style="padding:1.2ex 1.5ex;width:50%">
<input type="text" style="width:100%" size="20">
</td>

<td style="padding:1.2ex 1.5ex;width:50%">
<input type="text" style="width:100%" size="20">
</td>
</tr>
</table>
</html>

penders

10:30 pm on Jan 13, 2007 (gmt 0)

Just wondering... if it's in standards mode (ie. with a valid DOCTYPE), then isn't the total width of each table cell 'trying' to be:

total width = 50%(width) + 1.5ex(padleft) + 1.5ex(padright) (ie. larger than 50%?)

It certainly looks like that is happening... or have I got the way perc% work a bit wrong here?!

Although, take this example:

<div style="width:50%;background-color:#ccf;">Box 1</div> 
<div style="width:50%;padding:0 1.5ex;background-color:#fcc;">Box 2</div>

Under standards mode, Box 2 is wider than Box 1, as I would expect.

It would also explain why it works OK in IE under quirksmode (without a DOCTYPE), since it would be using its traditional box model where width:50% would indicate the 'total width'.

But why does it work OK in Firefox? It's as if the TDs are being 'constrictive'?!