Textboxes are rendered wider than other input controls

Discussion in 'ASP .Net' started by funstercinsolata@gmail.com, Jun 21, 2006.

  1. Guest

    --- 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:DropDownList ID="DropDownList1" runat="server"
    CssClass="input" >
    </asp:DropDownList></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!
    , Jun 21, 2006
    #1
    1. Advertising

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

    <> wrote in message
    news:...
    > --- 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:DropDownList ID="DropDownList1" runat="server"
    > CssClass="input" >
    > </asp:DropDownList></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
    #2
    1. Advertising

  3. Guest

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

    Patrick.O.Ige wrote:
    > Try to reduce the textBox width or use the width from the intellisense
    > Patrick
    >
    > <> wrote in message
    > news:...
    > > --- 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:DropDownList ID="DropDownList1" runat="server"
    > > CssClass="input" >
    > > </asp:DropDownList></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!
    > >
    , Jun 21, 2006
    #3
  4. Alan Silver Guest

    In article <>,
    writes
    >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

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
    Alan Silver, Jun 27, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TS
    Replies:
    2
    Views:
    6,943
  2. gorbus

    DIV wider than TD (cell)

    gorbus, Jul 29, 2005, in forum: HTML
    Replies:
    8
    Views:
    4,019
    Noodles Jefferson
    Jul 30, 2005
  3. Nathan Sokalski

    TD tags are wider than necessary

    Nathan Sokalski, Apr 23, 2007, in forum: ASP .Net
    Replies:
    4
    Views:
    313
    Nathan Sokalski
    Apr 25, 2007
  4. =?Utf-8?B?QW5kcmV3IEhheWVz?=

    TextBox Within Table Wider Than Cell

    =?Utf-8?B?QW5kcmV3IEhheWVz?=, Sep 27, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    505
    Just Me
    Sep 28, 2007
  5. OccasionalFlyer
    Replies:
    1
    Views:
    656
    Jukka K. Korpela
    Oct 20, 2011
Loading...

Share This Page