Support » Themes and Templates » Custom CSS per browser

  • Hi folks.

    There´s a way to put a custom css in the theme folder, and make it the one used on each browser?. For example, style-fox.css for firefox, style-opera.css for opera, style-ie for internet explorer, etc etc etc…

    I´m in a showdown designing my new theme. It´s looks great on Firefox, with some minor changes on Opera (only in lists), but in IE… the horror (you understand). I want to fix those erros on each browser. I try all the ways I know in css editing to fix them in only one css file, but I still a little n00b in it.

    If someone can help me, I will appreciate it so much :).


Viewing 4 replies - 1 through 4 (of 4 total)
  • Usually it is possible to use hacks for fix the style sheet for ie. This is not ideal but is the solution most use.

    It is quite simple for IE:

    <!--[if IE]>
     @import url(ie-styles.css);

    If you want to use for a specific version of Microsoft Internet Explorer :(replace the ‘ver’ with version number)

    <!--[if IE ver]>
      <link rel="stylesheet" type="text/css" href="ie-ver.css" />

    Just add this code to your header.php file, also provide the path to your special css file

    hope this will work for you..

    Thanks eondxd ^_^!

    That fixes the problem with IE. The big ones.

    Now, I need to fix the issues with Opera (list and forms align errors are the big ones in Opera).

    I had to use the double comments, a sort of if/then, if/not statement:

    <!–[if IE]><style type=”text/css” media=”screen”> @import “<?php bloginfo(‘stylesheet_directory’); ?>/iestyle.css”;</style><![endif]–>
    <![if !IE]><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” /><![endif]>

    Just plug that into the header. The first line tells IE to use the first stylesheet. The second line’s comments tell IE to ignore that line, but those conditional comments don’t register in other browsers so it shows up.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom CSS per browser’ is closed to new replies.