Forum Moderators: not2easy
<!--[if IE]>
<style type="text/css" media="all">
@import "ie4.css";</style>
<![endif]-->
Arggg - 'bangs head against wall'
A conditional comment does not negate the main stylesheet
can you show us all of what is between your <head>..... </head> tags please
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if IE]>
<style type="text/css" media="all">
@import "iehmeinterior.css";</style>
<![endif]-->
</style></head>
Is there not a way to have a "conditional" comment for specific browsers?
No.. at least my interpretation of your question leads me to say that. You cannot hide a regular stylesheet from IE without a lot of extra work, and indeed the CSS situation is nowhere near that bad, that you should have to?
Yes IE has conditional comments, which means you can offer a stylesheet that only IE will see, but IE will also see any "normal" stylesheets too so you need to use the conditional comment as an addition, to override anything you dont want, or to add stuff that other browsers don't need
It's still a Cascading stylesheet so you might need it to override the cascade rather that rely on it alone? (which is I *think* you're thinking it should do?)
here's an example
<style type="text/css" media="screen">
p {color: red;}
</style><!--[if IE]>
<style type="text/css" media="screen">
p {color: blue;}
</style>
<![endif]--></head>
<body>
<p>this text should be red, except in IE, where it should be blue</p>
</body>
This blue text is not happening because IE is only seeing the conditonal rule, it's happening because the second rule comes later in the cascade (try swapping the order of the two rules)
You originally set the <p> style to be red, but then you decide you want it be blue, so you add that second rule it will work for all browsers, until you also decide that the second rule should only be shown to IE so you add the conditional comment - almost as an afterthought ;)
the "cascade" is always in play, the conditional comment just filters which browser sees it..
if I've misunderstood you, then do feel free to correct me
Suzy
I may just be retarded, but I am just not getting what your saying. It seems like I may have given you the impression that I am trying to use this as a "main style sheet". I only want to use this style sheet in the event that a visitor is using IE6.
SuzyUK comment:
"It will still pick up the main (or FF) stylesheet, you should only use the IE stylesheet to "override" previously (in the cascade) set rules"
Thats the whole point of this code right? I am just guessing that there is a particular way to add this code? I know this works but how do you use it properly?
Here is my code again:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="interiorstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #211F72;
font-family : tahoma;
font-size : 10pt;
color : #000;
}
-->
</style></head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="interiorstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--[if IE6]>
<style type="text/css" media="all">
@import "iehmeinterior.css";</style>
<![endif]
body {
background-color: #211F72;
font-family : tahoma;
font-size : 10pt;
color : #000;
}
-->
</style></head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="interiorstyle.css" rel="stylesheet" type="text/css" />
<!--[if IE6]>
<style type="text/css">
@import "iehmeinterior.css";
</style>
<![endif]-->
<style type="text/css">
body {
background-color: #211F72;
font-family : tahoma;
font-size : 10pt;
color : #000;
}
</style>
</head>
I am having an issue with IE and "divs" and "padding"
The first thing to check is what doctype you are declaring for your page - this is one of the biggest causes of CSS rendering problems.
In particular, as I see you are using XHTML syntax, make sure that your doctype is on the very first line of your page and you are not using an XML prolog.Otherwise, see FAQ: Choosing the best doctype for your site [webmasterworld.com] for more information.
If you still need to have a separate IE stylesheet, then you need to add the conditional comment just after this line:
<link href="interiorstyle.css" rel="stylesheet" type="text/css" />
I know its not working because it has attributes that I specifically removed from the IE style sheet and its still picking up the FF stle sheet.
I took this to mean you didn't expect it to be picking up the FF styles.. however enough of that
ther's more info now ref the three messages I just spliced from another thread, I see you now have posted more code and Dana's suggestion should work, except for one small error .. there should be a space between IE & 6
<!--[if IE 6]>Note the syntax difference from your
<![endif]--> try this on a clean page, it's testing just fine for me
<style type="text/css">
body {
background-color: #ffe; /* yellow */
font-family : tahoma;
font-size : 12px;
color : #000;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* @import "iehmeinterior.css"; */
body {
background-color: #cfc; /* greeen */
font-size: 20px;
}
</style>
<![endif]--></head>
<body>
some text
</body>
let us know if that's working for you? the background should be green in IE6 only..
[edited by: SuzyUK at 12:51 pm (utc) on Sep. 16, 2006]
First get your syntax right.
e.g. this one does work:
...
<head>
...
<link rel="stylesheet" type="text/css" href="/css/layout.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
...
</head>
...
Once you have that, you need to realize you need to override settings from the standard one in the IE only file. You get whatever is in the standards file already and keep them unless you set them differently.
This is also why most of us develop it first in Firefox/Opera/... and then move to IE to work around the bugs, sorry, "features".
So if you define in layout.css
.classa {...; border: 1px outset #969491; ...}
.classa {border-width: 0}
.classa {border-color: #ffffff}
Note that the 1 pixel width, outset style and color get "inherited" into IE, you need to change them to get what you need.
The good news is that typically your IE stylesheet can be small as it just needs the dirty stuff, not the bulk of the layout.
These conditional statements are comments in the standard and as such all other browsers ignore them. It might even be so that MSIE should be slapped on the wrists for violating the standard by parsing comments, but it's our best bet till they fix their browser to be in line with the standard and the rest of the browsers.
I appologize for the confusion and appreciate all of your guy's help. Anyhow... per your suggestion, I used a "clean" html doc and it worked fine. Working within my existing html doc is another story. I am going to work on that for a bit and see where it takes me.
One of the members mentioned docu types that are appropriate for different elements, etc. I will definitely look into this. Thank you!
I will let you all know how it turns out.
