I have a search form that should look like this:
This is the HTML:\[code\]<form method="post" action="#" class="search-form"> <input type="text" class="nav-search-input input-initial" data-initial='Search' value="http://stackoverflow.com/questions/14035388/Search"> <input type="submit" class="nav-search-submit" value="http://stackoverflow.com/questions/14035388/"><!-- is the code for the Glyphicons search icon --></form>\[/code\]I'm using Bootstrap and Bootstrap Responsive styles, as well as the following styles for the search form:\[code\].search-form{ display: block; margin: 0;}input.nav-search-input,input.nav-search-submit{ color: #eeeeee; background-color: #181818; border-top: 1px solid #303030; border-bottom: 1px solid #303030;}input.nav-search-input{ width: 90px; height: 20px; -moz-transition:border-color 75ms; -o-transition:border-color 75ms; -webkit-transition:border-color 75ms; outline: 0!important; -webkit-appearance:none!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; margin-top: 10px; padding: 0px 0px 0px 8px; line-height: normal; font-weight: normal; font-size: 14px; border-right: none; border-left: 1px solid #303030; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px;}input.nav-search-submit{ font-family: Glyphicons; box-sizing: content-box; padding: 0px 6px 0px 5px; color: #aaaaaa; -moz-transition:border-color 75ms; -o-transition:border-color 75ms; -webkit-transition:border-color 75ms; border-left: none; border-right: 1px solid #303030; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}\[/code\]This works great on Chrome, Firefox, and Safari, but Opera is rendering the form like this:
The version of Opera in question is 12.02.It appears to be an issue with the padding. I've tried the solutions listed in this question to no avail. If I increase the top and bottom padding to make it look correct in Opera, it no longer looks correct in the other browsers. Here is a working version of the page.Side note, I haven't tested in IE as I'm on a Mac.