Geek Answers Handbook

CSS Firefox Vs Chrome Direct output height and position

Hi guys, I ran into css inconsistency issue between my browsers (Chrome and Firefox) at http://204.197.252.143/~themainr .

The height of the search button is not identical when comparing.

In addition, the search engine is not correctly aligned in firefox, as shown in the images below:

This is the view in google chrome (this is the desired output in all browsers):

enter image description here

This file is in firefox:

enter image description here

I tried setting the float to the right of the search section, but it just messed up the look of it.

Is there a good way to display this image correctly?

+4
source share
3 answers

You must set the height of the input search box, you can do this by setting its font-size property or setting its height property, this ensures that it will have the same height in both browsers.

To get rid of excess space on the right and align the search box using the menu below it, set float: right to .menu-main-menu-container :

 li.search input[type="text"] { -moz-box-sizing: border-box; background: none repeat scroll 0 0 #EBEBEB; border: 0 none; border-radius: 0 0 0 0; font-family: 'waukegan'; font-size: 25px; margin-left: 20px; padding-bottom: 3px; padding-left: 8px; padding-top: 2px; position: relative; top: -1px; width: 205px; height: 32px; /* Add this line */ } .menu-main-menu-container { float: right; /* Change this line */ max-width: 94%; }
+4
source

lol, all the tools in the world do not sometimes replace it with a game.

I managed to get the desired results by changing the font size in the search text box from 25px to 24px. In both Firefox and Chrome, I thought it was good.

I was able to do this using firebug for firefox and the built-in developer tools for chrome.

Learn to use them, because they are very important for such settings.

Good luck.

EDIT a more detailed example of what I changed

 li.search input[type="text"] { border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #ebebeb; margin-left: 20px; position: relative; top: -1px; width: 205px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'waukegan'; font-size: 24px; /*originally font-size: 25px;*/ padding-top: 2px; padding-bottom: 3px; padding-left: 8px; }
+8
source

just add this command to the current css (style.css file on line 203)

 li.search input[type="text"] { height: 32px; }

to use

+2
source

More articles:


All Articles