Textboxes are rendered wider than other input controls

funstercinsolata · Jun 21, 2006

--- This is my simple default.aspx:

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"
CssClass="input"></asp:TextBox>
<br />
<asp

ropDownList ID="DropDownList1" runat="server"
CssClass="input" >
</asp

ropDownList></div>
</form>
</body>
</html>

-- and my simple default.css
..input
{
width: 150px;
}

-----------------

When i run the code what i get is pretty interesting: the textbox is
wider than dropdownlistbox (or any other input box - be listbox or
anything). The problem is present in Firefox 1.5.0.4. as is in Explorer
6.0.2900.

If i remove tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> the page
gets normally rendered. Any idea why this is happening?

Thanks in advance!

Patrick.O.Ige · Jun 21, 2006

Try to reduce the textBox width or use the width from the intellisense
Patrick

funstercinsolata · Jun 21, 2006

This is not good solution because it does get rendered correctly on
Opera!!

Alan Silver · Jun 27, 2006

When i run the code what i get is pretty interesting: the textbox is
wider than dropdownlistbox (or any other input box - be listbox or
anything). The problem is present in Firefox 1.5.0.4. as is in Explorer
6.0.2900.

And who says the width of a text box has to be the same as any other
input element? If you don't specify a width, the browser uses its
default value. That is up to the browser manufacturer to decide. It
seems that both FF and MS decided to have wide text boxes by default.

If you think about it, this is quite logical. It is more likely that you
will enter long text into a text box than you would have long entries in
a list box.

Either way, the answer is simple, just specify the width.

If i remove tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> the page
gets normally rendered. Any idea why this is happening?

IE uses the doctype to decide which rendering mode to use. If you remove
the doctype (or actually if you remove the URL), IE switches to quirks
mode, which renders differently from standards mode. Both are full of
bugs, but standards mode is a little closer to the W3C recommendations.

HTH

Why is the border on top much wider	0	Nov 12, 2011
Style sheet question	3	May 24, 2012
Why is not the second control visible in design mode	9	Aug 20, 2011
Loop through record in datareader in aspx for textbox other item	1	Sep 26, 2023
Ajax with field validator	2	Sep 24, 2008
The code behind file seems to work very strange	2	Dec 15, 2010
newbie, trouble with doctype update	7	Dec 7, 2009
Making Table Text wider (other than "width")	1	Oct 20, 2011

Textboxes are rendered wider than other input controls

funstercinsolata

Patrick.O.Ige

funstercinsolata

Alan Silver

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads