CODEWITHSUNDEEP
htmlcss
Stan
Stan

Reputation: 26511

<select> element is a bit shorter then rest

So I've set my input, textarea and select elemtnts width of 97%. Everything is showing fine, but select element is always a bit shorter then rest. See picture for screenshot. enter image description here

How to fix this? :)

Okey I fixed it byt adding extra margin to select element, here is css.

#cat_add_form input[type="text"], #edtCatDescr, select, .fileUpload
{
    background-color: #ffffff;
    width: 97%;
    padding: 4px;
    margin-bottom: 6px;
    font-size: 16px;
    border: 1px solid #dfdfdf;
    display: block;


    /* CSS 3 */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#cat_add_form select
{
    margin-left: 10px;
}

Upvotes: 0

Views: 245

Answers (2)

thirtydot
thirtydot

Reputation: 228162

Use box-sizing: border-box.

This works in modern browsers, and IE8+.

Live Demo (or 97% version), modified from @Myles Gray's demo.

See here for more details.

For a way that works in IE7, see here.

Upvotes: 1

mylesagray
mylesagray

Reputation: 8869

select {
    width:98%;
}

Just play with values until it looks alright,

Demo

What browsers have you tested in?

Upvotes: 0

Related Questions