tags:

views:

3315

answers:

11
+3  Q: 

Unequal Html textbox and dropdown width with XHTML 1.0 strict

I'm trying to have two inputs (one textbox, one drop down) to have the same width. You can set the width through css, but for some reason, the select box is always a few pixels smaller. It seems this only happens with the xhtml 1.0 strict doctype Any suggestions/ideas about the reason/work around?

Having the following HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
    <style>
        .searchInput{
            width: 1000px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form action="theAction" method="post" class="searchForm" >
        <fieldset>
            <legend>Search</legend>            
            <p>
                <!--<label for="name">Product name</label>-->
                <input class="searchInput" type="text" name="name" id="name" value="" />
            </p>
            <p>
                <!--<label for="ml2">Product Group</label>-->
                <select class="searchInput" name="ml2" id="ml2">
                    <option value="158">INDUSTRIAL PRIMERS/FILLERS</option>
                    <option value="168">CV CLEAR COATS</option>
                    <option value="171">CV PRIMERS/FILLERS</option>
                    <option value="" selected="selected">All</option>
                </select>
            </p>
            <input type="submit"  class="search"  value="Show"  name="Show"  id="Show"  />
            <input type="reset" value="Reset" name="reset" id="reset" class="reset"/>
        </fieldset>
    </form>
</body
</html>
A: 

You're right, there is a 4px difference. The input is coming out at 103px wide, while the select is coming at 99px wide. I have no idea why this occurs, but you could work around it like this:

<style type="text/css">
    .searchInput {
        overflow: hidden;
    }
    select.searchInput {
        width: 101px;
    }
    input.searchInput {
        width: 97px;
    }
</style>

It's really quite silly, and I would be really interested if someone knew why this was happening, and a way to prevent it.

The work-around works on Webkit and Firefox. The pixel difference is different in IE.

The funny thing is, they would normally be the same size using an HTML doctype.

Vincent McNabb  2008-10-02 12:08:37
A: 

I had this issue in Firefox 2, but it seems to be resolved in Firefox 3 and IE7.

My fix was to add the missing pixels to a seperate width for select.

Ross  2008-10-02 12:09:59
A: 

It seems only with the doctype added this happens. Corrected the example.

borisCallens  2008-10-02 12:27:16
A: 

Yes, true. I have for now given the dropdown a seperate ID so I can explicitly set the width. But that sucks. What if I want to set this width in %?

borisCallens  2008-10-02 12:59:06
Yup, it'll break. I'm actively searching for an answer.
Vincent McNabb  2008-10-02 13:00:58
Any luck with that?
borisCallens  2008-10-03 07:11:47
A: 

Browsers tend to do their own thing with regard to form elements and styles. The CSS standard doesn’t specify how browsers should display form widgets, nor which CSS properties it should let users change. It varies between browsers, and between different form widgets in the same browser.

You could try adjusting the padding and borders to help different form widgets match up.

Paul D. Waite  2008-10-02 13:31:54
A: 

@Paul D. Waite - Got to agree with you there

This isnt what css is meant for look at input boxes in safari for example theyre eliptical and the css properties just dont appy in some cases

Pad around your elements to line them up

Allen Hardy  2008-10-02 16:21:49
Just because it wasn't specified doesn't mean CSS wasn't meant to style them. Even though there are valid points against styling your elements for usability's sake (buttons look consistent everywhere), I think width and height are essential things in a lay-out and don't impose any usability threats.
borisCallens  2009-03-02 15:06:26
+1  A: 

This looks like a duplicate of http://stackoverflow.com/questions/28713/is-there-a-simple-way-to-make-html-textarea-and-input-type-text-equally-wide which has answers with several things you can try.

Peter Hilton  2008-10-03 11:56:10
Indeed, it is a similar question. But it looks to me that they're on the wrong track.It dftly depends on the doctype too.
borisCallens  2008-10-03 14:25:37
I agree these are different. This question's example actually invokes the other question's solution in demonstrating the problem. This question is not answered elsewhere.
Carl Camera  2008-10-03 15:03:44
A: 

You could try resetting the margins, padding and borders to see if that helps:

.searchInput {
    margin:0;
    padding:0;
    border-width:1px;
    width:1000px;
}
Ian Oxley  2008-10-03 14:58:33
I tried. But couldn't get it to work :(
borisCallens  2009-03-02 15:08:17
+1  A: 

This seems to have something to do with the box model. More specifically, it seems to have something to do with the border. If you're using firebug, check out the layout tab...

The select shows a 2px border, 0 padding and a width of 996px and height of 18px.
The input shows a 2px border, 1px 0 padding and a width of 1000px and height of 16px.

If you set the border to zero (and give them a background color), you can see they'll be the same size, which shows them both with a width of 1000px in the layout tab.

    .searchInput{
        width: 1000px;
        border: 0;
        background-color: #CCC;
        overflow: hidden;
    }
enobrev  2008-10-03 21:41:02
A: 

It is ndeed due to the Box Model that #IE supports when it finds the "strict" in the doctype. If u change it to "traditional" doctype everything behaves normally...but not normally as per CSS standard.

CSS Box Model states that in the width/height of an element the padding and border withs are not included. So they are additional on top of the mentioned width of the element, and thus are bigger than desired actually.

 2009-02-21 13:48:49
A: 

Hi All, solution from Ian Oxley worked out for my site, I appreciate all. -Raj

 2009-04-01 13:28:44

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?