Form Padding Differences in Firefox and Opera/Chrome/Ie

Form padding differences in Firefox and Opera/Chrome/IE

Give the input this CSS:

box-sizing: border-box;

You can read more about box-sizing on QuirksMode, the W3C spec, and MDN. Here is its browser support. Use the prefixes -moz- or -webkit- if required by your target browsers.

---

This answer had previously suggested the value initial, which I had found by using the up/down arrow keys in the Chrome Web Inspector. But it turns out that initial is a CSS keyword, applicable to any property, that represents the initial value of the property – the browser’s default value. initial is less safe than explicitly naming which box model to use. If box-sizing: initial were specified and a browser’s default value for box-sizing changed, the input’s padding could break again.

Input Field appearing different in Chrome and Firefox

There is a difference because Firefox uses box-sizing: content-box on type="search" inputs, while Chrome uses border-box.

.form-wrapper input {
    box-sizing: border-box;
}

http://jsfiddle.net/J8dSN/12/

CSS - Position absolute differs from Chrome/Opera to Firefox/IE

Try searching "moz" for mozilla and "webkit" for Chrome...

Maybe you can make some screenshots?

pixel differences between opera, safari, FF and IE

I simplified the CSS down a bit to make it a bit more manageable and to show you my approach:

http://jsfiddle.net/G8wcP/

<div id="search">
    <form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
        <input type="text" name="keyword" size="35" class="rounded" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
        <input id="searchSubmit" type="submit" value="" />
    </form>
</div>​

#search{ 
    width:207px;
    position:relative;
    display:block;
    border:1px solid #ccc;
}

input.rounded {
    display:block;
    width:180px;
    height:30px;
    border:0;
}

#searchSubmit{
    display:block;
    position:absolute;    
    left:180px;
    top:5px;   
    background: red;
    width: 20px;
    height: 20px;
    cursor: pointer;
}​

The approach you took probably won't stand up to cross-browser as you have already witnessed.

Basically, style the #search div with borders. Relatively position the input (text) element and then absolute position the submit element. You could relatively position both elements if you wish.

Bootstrap modal looks differently in Chrome and Firefox

Now it's the same, see this fiddle

I've changed this :

form {
    margin: 40px 40px 0;
}

However I can't explain why, I don't know why. Maybe check this link for further information about this phenomenon :
Form padding differences in Firefox and Opera/Chrome/IE

main element doesn't show padding in Opera, Safari, IE

It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about here

main.wrapper{
    display: block;
}

::first-letter selector - IE11 has a different layout compared to Firefox

This is a well-known discrepancy between Firefox's treatment of floating ::first-letter pseudo-elements versus other browsers, documented in this bug report. Firefox is the only browser that follows CSS2.1 correctly here, which is ironic considering that Firefox is otherwise the browser where ::first-letter is most broken in (Chrome being a close second).

The bad news is that there is nothing you can do to work around this in other browsers without using some sort of browser hack.

The (sorta) good news is that the working group is planning to consolidate this behavior in CSS Inline Module Level 3 with the initial-letter-align property, and we can only hope that browser vendors implement it eventually.

---

Related Topics