CSS that only applies to Chrome? [closed]

Question

This is my site: http://portable-ebook-reader.net

The search bar at the top is made up of two background images. One is for where you'd type in the search phrase, the second is the actual button to search.

My problem is that in Chrome the search button image is 2px too HIGH. But it looks perfect in IE and FF. And if I modify the CSS (margin-top: 2px) then Chrome looks good but IE and FF are messed up.

Any ideas? I've been searching for hours without any luck.

Thanks!

Answer 1

To use CSS that will only apply to Webkit browsers (Chrome and Safari):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; }
    #s { margin-top: 5px; } 
}

An ugly hack but it can work for those frustrating rendering problems.

Answer 2

You could check to see if navigator.appVersion contains the word "Chrome" and set the relative positioning of that button down a couple pixels via javascript.

if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}

Answer 3

Get it looking right for FF first. Then get it looking right for both FF and Chrome. Only after you have it looking right in FF and Chrome, should you start concerning yourself with how it looks in IE. After you achieve this, then start adjusting for IE, if necessary, using * before your style rules, example: *margin-top:2px; adjusts the top margin for IE7 and IE6 exclusively.

After looking at your code, it's difficult to say exactly what may be causing the problem without being able to test different solutions on my system. But here are some things you can try to change in your styles.css file (located in your 'chronicle' folder within your 'themes' folder) that may correct the issue:

• apply the same height value to both your #s and #searchsubmit rule-sets
• remove font: 14px "century gothic", Arial, Helvetica, sans-serif; from #searchsubmit
• after you do the above, if it still doesn't look right in both FF and Chrome, set the first and second padding values for your #s rule-set to 0 (i.e. change 8px to 0px) and then add a margin-top: declaration to both #s and #searchsubmit and give both the same value, for example margin-top:8px;
• if you're still having issues, try copying this line: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; from your #s rule-set and add it to your #searchsubmit rule-set so that it appears in both rule-sets.

There's so many different possibilities that could be causing the problem, which is why you may want to try one of the aforementioned hacks if you can't figure out the source of the problem.

Answer 4

Try changing your doctype to strict - whatever works in one should mostly work the same in all three major browsers. Mostly.

Answer 5

Just as a reference, a list of all possible browser specific CSS hacks. Although I discourage the use of those hacks, it may suit a quick fix for your problem.

Answer 6

I found this trick a couple of weeks ago and it seems to work identically in all browsers.

Create a single graphic that contains both your search bar and search button. Make it the background of your form through CSS styling. Then adjust both your text input and submit button (likely through classes or IDs) to have {border:0; background:transparent} and then simply adjust the height and width of the form elements to fit the layout of your form background. I formerly used <input type="image" ... /> but could never get the alignment quite right no matter how I styled or padded it. This method works right pretty much after your first adjustment of the form elements' margin, padding and absolute positioning if need by (you might want to leave the borders visible during testing just so you can place it properly).

I also find it handy to put a {cursor:pointer;} over my search submit button and sometimes even other form inputs to give a visual clue that this is a submittable form and people are encouraged to click.