Life has become far simpler for Website developers over the past few years with the major Internet Browsers becoming more standards compliant. Unfortunately there are still display and functionality issues; these issues however are sometimes relate to how the Browser renders a page (or the DOM). When and where various elements are rendered affect the layout, functionality and even speed of the Webpage.
I recently saw a rendering issue when making some changes to a WordPress Website for a client; the Website is built with the StudioPress (Genesis Framework) eleven40 child Theme. For some reason, when placing a search field and button in the navigation (#nav), the search button would show below the search field rather than inline when using Firefox. In Chrome, Safari and Internet Explorer 10 the button displayed to the right of the search field as it should have.
After much searching and trying various CSS I eventually came across a solution. To display the search button on the same line as the search field simply add the following to your style.css file:
Please note that the StudioPress theme used (eleven40 in this instance) uses a class of s for the search form so you may need to amend the ID or Class as needed.
Hat Tip Evelyne.