SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Co Durham UK
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conditional Statement Puzzle

    Hi Can anyone help?
    I decided to experiment with conditional statements and stylesheets.
    My conditional statement regarding IE stylesheets doesnt seem to work.

    Please take a look at my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Conditional Statement Test Page</title>
    
    <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="stylesheet_ie.css" />
    <![endif]-->
    
    <link href="stylesheet_ff.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body>
    <div id="wrapper"></div>
    </body>
    </html>
    Here are my two stylesheets:


    Firefox:
    Code:
    body {
        margin: 0px auto;
        padding: 0px;
        position: relative;
        left: auto;
        right: auto;
        background-color: #ff0000;
        
    }
    #wrapper {
        background-repeat: no-repeat;
        left: auto;
        right: auto;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: 600px;
        width: 800px;
        position: relative;
        z-index: 1;
        background-color: #0066cc;
    }
    IE:
    Code:
    body {
        margin: 0px auto;
        padding: 0px;
        position: relative;
        left: auto;
        right: auto;
        background-color: #ff0000;
    }
    #wrapper {
        background-repeat: no-repeat;
        left: auto;
        right: auto;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: 600px;
        width: 900px;
        position: relative;
        z-index: 1;
        background-color: #0000ff;
    }
    However in IE the pages are the same colour and width as Firefox.

    Here is the page:
    Conditional Statement Test Page

    Can any one tell me where Im going wrong?
    Thanks, Alan.
    Last edited by Paul O'B; May 26, 2011 at 12:30. Reason: code tags added

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are including stylesheet_ff after stylesheet_ie, so items from stylesheet_ff override items from stylesheet_ie.

    Change order of css files.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    As CyberAlien says, you need the IE file last, because the last styles given take precedence. And while only IE is looking at stylesheet_ie.css, all browsers (including IE) are looking at stylesheet_ff.css.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I should also point out that you only need the differences in the IE stylesheet. You don't include the whole file as that would be a nightmare to maintain.

    So in your example the IE only stylesheet should contain just the background color.

    Code:
    #wrapper {  background-color: #0000ff; }
    Also don't specify things that are unnecessary.

    e.g.Your rules should be this:
    Code:
    html, body {
        margin:0;
        padding: 0;
    }
    body {background: #f00;}
    #wrapper {
        margin:0 auto;
        height: 600px;
        width: 800px;
        position: relative;
        z-index: 1;
        background-color: #06c;
    }
    (The position:relative and z-index are only needed if you are intending to overlap elements or create stacking contexts.)

    I also assume you are just testing things at the moment but you would never normally set a height on your main content container. Content should dictate the height.

    Also it is unlikely that you want to give all versions of IE those specific rules so make sure you target only the versions that need it. Usually it's only Ie6 that needs the hacks. Ie7 is much better behaved but does occasionally need help.

    The following would target IE6 and under:

    Code:
    <!--[if lte IE 6]>         <link rel="stylesheet" type="text/css" href="stylesheet_ie.css" /> <![endif]-->
    Lastly before you use a hack make sure that you know that the reason you are hacking is because of a known bug. Otherwise you are probably hacking badly written code and its the code that should be fixed and not the browser hacked.

    I often see beginners hacking IE simply because they forgot about the default margins and paddin g on elements and they end up with an unworkable page built on coding flaws rather than browsers flaws.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Co Durham UK
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks CyberAlien and Stevie and thank you for the useful tips Paul O'B
    Alan.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    NOT that you really should use those -- if you have to send IE a different stylesheet, there's probably something fundamentally wrong with the code for the page. As Paul said, basically hacking bad code instead of fixing the real problem.

    Only time I would use a IE conditional is for Javascript -- and for the most part that's what we have behavior files for.

    Though it IS important to know how they work and how to use them -- like any other tool the more you have in your toolbox, the better prepared you are. If nothing else it lets you understand how badly other coders screwed up when building their sites.

    Which pretty much even resorting to them for CSS usually means a coder who doesn't know enough CSS, or a non-viable inaccessible broken layout concept from some PSD jockey.


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
  •