Posted

2.05.2010

in category

Tutorials

with

17 comments

The modern browsers these days have all kinds of different implementations of css standards. Because of that it’s hard for webmasters to create the perfect css code that will work in any different kind of browser. The best way to solve this issue is by creating a css file for every kind of browser.

After long searching and with some help of php knowledge. A php code was created. The most common issue was the difference between Internet Explorer 7 and Mozilla Firefox. I will explain you how to create 2 different css files for the browsers.

Just paste this code into the header of your website.

<?php
function browser_info($agent=null) {
  $known = array(‘msie’, ‘firefox’, ‘safari’, ‘webkit’, ‘opera’, ‘netscape’,
    ‘konqueror’, ‘gecko’);
  $agent = strtolower($agent ? $agent : $_SERVER[‘HTTP_USER_AGENT’]);
  $pattern = ‘#(?<browser>’ . join(‘|’, $known) .
    ‘)[/ ]+(?<version>[0-9]+(?:\.[0-9]+)?)#’;
  if (!preg_match_all($pattern, $agent, $matches)) return array();
  $i = count($matches[‘browser’])-1;
  return array($matches[‘browser’][$i] => $matches[‘version’][$i]);
}
?>
<?php
$ua = browser_info();

if (($ua[‘msie’]==7.0)) {
                echo "<link href=’style-ie.css’ rel=’stylesheet’ type=’text/css’/>";
                }else{
                               echo "<link href=’style.css’ rel=’stylesheet’ type=’text/css’/>";
                               }

?>

When you look close at the bottom of the code you will notice 2 different css styles, highlighted in red. The first one will be shown into Internet Explorer 7.0, the second one is created for all the other browsers. As you can see I named the first one style-ie.css and the other one style.css, you can change this into anything else you like.

<link href=‘style.css’ rel=‘stylesheet’ type=‘text/css’/>

I optain to create your website first in Mozilla Firefox and then changing the css file of Internet Explorer 7, Because when something looks good in Firefox it will automatically look 95% good in the other browsers.

In the style-ie.css file you just need to change the margins and paddings, if you notice some text boxes dissapeared or not showing up try to add float:left or remove float:left from the css code.

If you wan’t the css code to work for a different kind of browser or different version of explorer just change following php line:

if (($ua[‘msie’]==7.0)) {

- “['msie']==7.0″ = Checking for Internet Explorer 7, So if you change 7.0 into 6.0 it will use Internet Explorer 6. Knowing this you can change the different kind of version of Internet Explorer.

- Changing ‘msie’ into one of these other words you can change the different kind of browser.

‘firefox’, ‘safari’, ‘webkit’, ‘opera’, ‘netscape’, ‘konqueror’, ‘gecko’

If you still need some help with programming, just drop a line in the comment box below, I use this method for some time now and it works perfect! I think it’s the easiest way to fix browser issues.

Name (required)
Mail (required)
Website
Add your comment
  1. MarkSpizer zegt:

    great post as usual!

  2. Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.

  3. internet zegt:

    I admire the time and effort you add into your blog. I wish I had similar drive :)

  4. Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

  5. I observe that your statement is rather thoughtful as it talks about plenty of accurate data. By the way, was curious whether you would like to exchange links with my web portal, as I am looking forward to generate more links to further extend and gain better web exposure for my web site. I don’t really mind you positioning my links at the homepage, just getting this web links on this page is good and sufficient. Moreover, would you be kind enough message me back at my web space if you are keen in the link exchange, I would really value that. Thanks a lot and hopefully to hear from you as soon as possible!

  6. Recently, I didn’t give so much thought to writing comments on blog entries and have left comments even less. Checking out your insightful page, will probably encourage me to do so more regularly.

  7. Hi. I wanted to drop you a quick note to express my thanks. I’ve been following your blog for a month or so and have picked up a ton of good information as well as enjoyed the way you’ve structured your site. I am attempting to run my own blog but I think its too general and I want to focus more on smaller topics. Being all things to all people is not all that its cracked up to be.

  8. this post is very usefull thx!

  9. waiting for next post

  10. admin zegt:

    New posts will come soon! I need to create some other stuff first – I’m working on a new layout this could take some time.

  11. rlxa zegt:

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  12. Ciaran zegt:

    Hi, this is really useful and thanks for posting it. I am having a little problem though in that when I paste the code into my tags it doesn’t render correctly. The code actually appears at the top of the web page. You can see here what I mean: http://www.ciarangaffey.com/gwe/index2.html. It probably something simple like a missing > but I can’t figure it out. Help would be greatly appreciated.

  13. Ciaran zegt:

    wait…ignore the above…i foolishly forgot my tags

  14. Ciaran zegt:

    Ok, so I want to use this code to specify a stylesheet just for firefox. So I replace msie with firefox and tell it what style sheet to use, in this case style-ff.css. I put the version at 0, then 3.0 then 3.6.8 when testing but its still not working. Could you please take a look and see what I’m doing wrong. Link is http://www.ciarangaffey.com/gwe/index2.html. Thank you.

  15. Smile_Man zegt:

    I would like to exchange links with your site http://www.youresorandom.com
    Is this possible?

  16. WP Themes zegt:

    Nice dispatch and this mail helped me alot in my college assignement. Say thank you you on your information.