Conditional Statement Puzzle

HTML & CSS
1

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:


<!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:


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:


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.

2

You are including stylesheet_ff after stylesheet_ie, so items from stylesheet_ff override items from stylesheet_ie.

Change order of css files.

3

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

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.


#wrapper {  background-color: #0000ff; }

Also don’t specify things that are unnecessary.

e.g.Your rules should be this:


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:


[B]<!--[if lte IE 6]>[/B]         <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

Thanks CyberAlien and Stevie and thank you for the useful tips Paul O’B
Alan.

6

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.