implementing browser specific css for Chrome

[aeverse 0]

My nav bar top margin was rendering one way in IE and Chrome and another way in FF. I was able to fix it for IE and FF, but not for Chrome. IE and FF need a 14px top margin and Chrome needs 16px. Weird, huh? I was able to fix all but Chrome. (I created an IE9 css file and called it just as the original IE7 version that comes with the theme. For the Chrome file, I used a different format because when I tried to call chrome.css in the same way as IE9, it broke IE9.) Ugh! Can anyone tell me what I should do differently here? Thanks, Amanda http://hytrainium.com/wp-dev/ <?php get_template_part ('library/dynamic_css'); ?> <?php wp_enqueue_style('ie7-style', THEME_CSS . '/ie7.css'); global $wp_styles; $wp_styles->add_data( 'ie7-style', 'conditional', 'lte IE 7' ); ?> <?php wp_enqueue_style('ie9-style', THEME_CSS . '/ie9.css'); global $wp_styles; $wp_styles->add_data( 'ie9-style', 'conditional', 'lte IE 9' ); ?>

[Rob 547]

Not sure, but you may need a browser detection plugin to help viewers reach the right page template. I'll escalate this.

[aeverse 0]

Thanks for sending this up the line. I am already trying to do browser detection with the javascript from this site: http://rafael.adm.br/css_browser_selector/ Hadn't thought about a plugin. I'll look for one.

[aeverse 0]

This plugin has helped get me further along: http://wordpress.org/extend/plugins/php-browser-detection/ However, once I fixed Chrome and confirmed that IE was ok, I noticed that Firefox was then messed up. See: If I remove the original 14px top margin setting from the custom css file, then Chrome works but Firefox breaks. If I put it back in, Firefox works and Chrome breaks. Through this all (shockingly), IE renders it perfectly. <?php if ( is_firefox ) {echo "http://hytrainium.com/wp-dev/wp-content/themes/iblogpro/css/firefox.css' type='text/css' media='screen'>";} ?> <?php if ( is_chrome ) {echo "http://hytrainium.com/wp-dev/wp-content/themes/iblogpro/css/chrome.css' type='text/css' media='screen'>";} ?> HELP!

[aeverse 0]

Ok... after some serious digging, my brilliant husband found that the plugin's code was outdated. if anyone has these kind of browser compatibility issues and wants to use this plugin, read this post first to get updated ini files: http://martythornley.com/downloads/php-browser-detection/#comment-4774 now my nav bar is rendering correctly everywhere.... now to fix my footer... ugh.

[Rob 547]

Try this one, and see if it helps. It's a bit newer. http://wordpress.org/extend/plugins/awebsome-browser-selector/ I think many people have these issues, so you're not alone. Ironic how IE, which is the browser most people had trouble with before Chrome now works best and Chrome is causing trouble everywhere. The key is finding the right browser detection and CSS. Meanwhile, and old but effective trick is to post a little text message somewhere on your site saying "Best viewed in (name of browser) in xxxx by xxxx resolution." On a side note, since Chrome did a recent update I've seen more and more people complaining about it disrupting their sites and changing margins. It's not your coding or site but their bugs that's the problem.

[Simon 248]

eww javascript. No need for it an it isnt reliable. Use this code in functions.php:

	add_filter('body_class','extension_browser_body_class');
	function extension_browser_body_class($classes) {
	  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
	
	  if($is_lynx) $classes[] = 'lynx';
	  elseif($is_gecko) $classes[] = 'gecko';
	  elseif($is_opera) $classes[] = 'opera';
	  elseif($is_NS4) $classes[] = 'ns4';
	  elseif($is_safari) $classes[] = 'safari';
	  elseif($is_chrome) $classes[] = 'chrome';
	  elseif($is_IE) $classes[] = 'ie';
	  else $classes[] = 'unknown';
	
	  if($is_iphone) $classes[] = 'iphone';
	  return $classes;
	}
	

with this you will get browser specific body class which you can then target with css.

[gameslab 0]

Could you tell me how I could apply this filter technique to target the texture class in pagelines? I have this working using the body section but I would like to make IE specific css position changes to the texture class the control the feature slider.