CODEWITHSUNDEEP
htmlcss
Boris Callens
Boris Callens

Reputation: 93327

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">
<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>

Upvotes: 9

Views: 8957

Answers (8)

Allen Hardy
Allen Hardy

Reputation: 169

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

This isn't what CSS is meant for. Look at input boxes in Safari, for example. They're elliptical. CSS properties just don't apply in some cases.

Pad around your elements to line them up.

Upvotes: 0

AKGhora
AKGhora

Reputation:

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.

Upvotes: 0

enobrev
enobrev

Reputation: 22532

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;
    }

Upvotes: 3

Ian Oxley
Ian Oxley

Reputation: 11056

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

.searchInput {
    margin:0;
    padding:0;
    border-width:1px;
    width:1000px;
}

Upvotes: 5

Paul D. Waite
Paul D. Waite

Reputation: 98816

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.

Upvotes: 0

Vincent McNabb
Vincent McNabb

Reputation: 34689

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.

Upvotes: 0

Boris Callens
Boris Callens

Reputation: 93327

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

Upvotes: -1

Ross
Ross

Reputation: 46997

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.

Upvotes: 0

Related Questions