CSS that only applies to Chrome?

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

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 2

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

Answer 3

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 4

Have a look at http://rafael.adm.br/css_browser_selector/

little js file that adds classes to your body tag like .webkit, .chrome etc which you can thus use in your stylesheet.

Answer 5

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.