WordPress.org

Ready to get started?Download WordPress

Forums

Custom CSS per browser (5 posts)

  1. Madcore
    Member
    Posted 7 years ago #

    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 :).

    Thanks.

  2. dprince
    Member
    Posted 7 years ago #

    Usually it is possible to use hacks for fix the style sheet for ie. This is not ideal but is the solution most use.

  3. eondxd
    Member
    Posted 7 years ago #

    It is quite simple for IE:

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

    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" />
    <![endif]-->

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

    hope this will work for you..

  4. Madcore
    Member
    Posted 7 years ago #

    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).

  5. judkinsc
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags