Results 1 to 8 of 8

Thread: Dynamically load CSS depending on Browser

  1. #1
    Join Date
    Sep 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Dynamically load CSS depending on Browser

    I webpages are lining up differently in IE than Firefox. I was thinking to do some kind of browser sniffing and apply the appropriate stylesheet. So my question is how would you accomplish this.?

    Then trying to search this site I found a post which says
    Don't code individually for each browser. Make one css that covers them all. If you make it to standards, you will only need to add a few extra lines to make it work with IE.
    But the poster who quoted above did not go on to say specifically how to do what they were recommending.

    So in short my main question is: what is and how is the best way to handle styling of webpages that would be viewed in various browsers. (IE, FF, Opera, Safari).

    Thanks for your help in advance
    Dallr

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    conditional statements.

    Code:
    <!--[if IE]>
    <style type="text/css">
    some_element {
    some_attribute: 10px;
    }
    </style>
    <![endif]-->
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. The Following User Says Thank You to TheJoshMan For This Useful Post:

    dallr (09-23-2008)

  4. #3
    Join Date
    Sep 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply Nyne.
    But I am new to web development so be gentle with me. Please note I have to options in my first post which one were you referring to?
    1. Where do I put this code? In the same CSS file or in the html page?
    2. What do I put in the if statement to handle the various browsers. e.g [if IE], [if Opera], [if Safari], [if Firefox].
    3. ....plus any other information you or someone else might seem necessary for me to know in this instance.

    Dallr

  5. #4
    Join Date
    Sep 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Can anyone help me out here, I am sure the question I am asking is not difficult and is quite common.!!!!

    Dallr

  6. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    IE shouldn't be the only browser that you need these types of conditional statements. The reason behind this is because the other popular browsers, Firefox/Opera/Safari/Konquerer etc... support web standards, where IE is behind in that regards.

    So many websites that were/are designed with web standards need the additional IE "mods/hacks" to not have the website break when being viewed with IE.

    so develop and test for standards, and then if necessary apply the modifications for specific IE fix issues

  7. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    As boogyman stated, most of the other popular browsers (Firefox, Opera, Safari, Konqueror) comply to the standards set forth by W3C.

    So, the conditional statement is MOST USUALLY used specifically for IE due to the fact that as boogyman said, "IE is behind in that regards" (which by the way I believe to be the ultimate UNDERSTATEMENT of the year).

    I believe that what boogyman was telling you is to code "to standard", then fix IE if needed (usually is needed).

    To use a conditional statement, you would put it in the <head> of your page, like so:

    Code:
    <html>
    <head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="main-styles.css">
    <!--[if IE]>
    <style type="text/css">
    body{
    background:#000;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    blah blah blah
    </body>
    </html>
    The idea behind a css conditional statement is to correct any errors which a particular browser may render in css. So, if you look at your page and everything looks great in FF, then you open it in IE and it's shifted to the left 10px... Then in your conditional statement you would need to adjust either the position, padding, or margin depending on which element is out of whack.

    Let's say that your "sidebar" is shifted 10px to the left in IE, but displays fine in FF, Opera, Safari, etc... Here's how you would fix it.

    Code:
    <html>
    <head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="main-styles.css">
    <!--[if IE]>
    <style type="text/css">
    #sidebar {
    margin: 0 -10px 0 0;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    blah blah blah
    </body>
    </html>
    The code above would shift the sidebar 10px to the right ONLY IN IE.

    I hope this was simple enough to understand.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  8. The Following User Says Thank You to TheJoshMan For This Useful Post:

    dallr (09-23-2008)

  9. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

  10. The Following User Says Thank You to Medyman For This Useful Post:

    dallr (09-23-2008)

  11. #8
    Join Date
    Sep 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Much Thanks to all, I am back in business. !!

    Dallr,

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •