Home/ Questions/Q 6254943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T14:16:23+00:00

I’m trying to make a simple search form on my website and I’m using

  • 0

I’m trying to make a simple search form on my website and I’m using the input HTML element. But it is acting really weird.

It gets resized by the browser no matter which size I specify in the style. In the example below I’ve got an input element with the width of 180px, but the browser renders it as 147px. :/

Do you know what could be the problem?

Here’s a video example and the code below: http://screencast.com/t/WwqAQDmofhf

<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The meaning of ‘width’ depends on the page’s box model. Traditionally width has included paddings and borders, but the standard model now excludes them.

    If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.

    <!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
    • 0