CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
supertrpr
supertrpr

Reputation: 3

Cross browser compatibility issues with HTML form

I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.

The form is an 800px wide text input (785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.

The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.

Here is a JSFiddle.

CSS:

div.formdivholder {
    width: 100%;
    height: 70px;
    padding-top: 20px;
}

div.formdiv {
    width: 900px;
    height: 70px;
    margin: 0 auto;
}

input.text {
    z-index: 20;
    height: 38px;
    width: 785px;
    float: left;
    padding-left: 10px;
    border: solid;
    border-width: 5px;
    border-color: #3374DC;
    border-right: 0px;
    background-color: #F0F4FA;;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}

input.submit {
    z-index: 1;
    height: 50px;
    width: 100px;
    float: right;
    color: #F0F4FA;
    font-weight: bold;
    background-color: #3374DC;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-width: 0px;

}

HTML

<div class="formdivholder">
    <div class="formdiv">
        <form class="search" role="search" method="get" action="/searchresults.php">
            <input type="text" name="input" class="text" placeholder="Search for"> 
            <input type="submit" class="submit" value="Search"> 
        </form>
    </div>
</div>

Upvotes: 0

Views: 846

Answers (2)

skobaljic
skobaljic

Reputation: 9634

Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):

input.text {
    height: 50px;
    width: 800px; /* OR even this: width: calc(100% - 100px)  */
    box-sizing: border-box;
    ....
}

Take a look in Fiddle.

Definition of the property value border-box:

The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}

You can see these days people drop support to IE8, so at the start of CSS they simply put:

*, *:before, *:after {
    box-sizing: border-box;
}

(and make their life easier).

Upvotes: 1

Nec
Nec

Reputation: 178

try using % instead of pixel, should do the trick, later on you might have to do some responsive so the % will save you time on that one also

Upvotes: 0

Related Questions