Forum Moderators: not2easy
This is the first time I've tried using more than a single stylesheet - yet despite being assured its easy I just can't get Internet Explorer to pick up the second sheet. I've tried two or three options around the net and tried changing the if statement but I still get no joy!
Here's my header:
<head profile="http://example.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
</style>
<?php wp_head(); ?>
</head>
[edited by: swa66 at 8:21 pm (utc) on Nov. 27, 2008]
[edit reason] No URLs, use example.org, see forum charter [/edit]
the cause of your problem is a missing closing tag - </style> - here...
[blue]
<style type="text/css" media="screen">[/blue]
birdbrain
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen"></style>
<!--[if IE]>
but IE still doesn't pick up my sheet. I've also made sure the sheet actually should effect the site.
you must bear in mind that IE will also implement this first...
[blue]
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />[/blue]
...and then this next...
[blue]
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->[/blue]
Therefore any css in the former that is not required by IE must be nullified in the latter.
birdbrain
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
TO prevent IE8 (which is promised to be standards compliant from having to deal with all the bugfixes an dworkarounds for it's older siblings.
swa66 - I'll try it. I'll be happy with a working solution for the moment.
e.g. if in your main CSS you have:
#footer p {
color:blue;
}
#footer {
color: fuchsia;
}
Tip: "pink" as keyword isn't a valid color ...
[w3.org...]
I'm not certain what your refering to.
Also I'm not using the word pink, but this:
color:#FF00FF;
which comes out pink.
Also did you mean blue or black the second time.
and pink = fushia
Well I tried simply changing the 1.0 to 1.0.1 which didn't help. I don't know the first thing about version types so there's probely something else that needs to change.
Still I want to know if you meant blue or black the second time. (Staying black under those conditions makes no sense to me)
[edited by: GGR_Web at 9:45 am (utc) on Dec. 1, 2008]
I used
(xhtml 1.0)
<!--[if IE]>
<style type="text/css" media="screen">
@import url(http://www.example.com/blog/wp-content/themes/GGR/ie.css);
</style>
<![endif]-->
I've seen it a dozen times but somehow didn't get round to trying until now. Thanks for your suggestions! I should be rapidly able to get our site ready now!
[edited by: swa66 at 2:27 pm (utc) on Dec. 1, 2008]
[edit reason] use example.com, it cannot be owned [/edit]
[w3.org...]
Basically there are 4 (but I usually only use the last 3 as I never write style="" attributes) numbers that should be seen as digits in a very large base number.
Since there is no easy notation for "very large base" numbers, I tend to use dots between them.
so a selector of * gets 0.0.0
a selector like body gets 0.0.1
a selector like .class gets 0.1.0
a selector like #id gets 1.0.0
Now you can combine them and add them up for all components in the selector.
so something like
body #about .menu ul li ul li {...}
has a specificity of 1.1.5
Also did you mean blue or black the second time.
If this:
<!--[if IE]>
<style type="text/css" media="screen">
@import url(http://www.example.com/blog/wp-content/themes/GGR/ie.css);
</style>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet"
href="http://www.example.com/blog/wp-content/themes/GGR/ie.css"
type="text/css" media="screen" />
<![endif]-->
Scrolling back I think I've seen why it doesn't work for you:
...
<style type="text/css" media="screen"><!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
...
</style>
This is simply the wrong place to put it, try putting the conditional comment above the <style> tag, not inside it.
Sorry I didn't spot it earlier.
Just for reference, what does Ite actually do? It's not quite a not statement.
In real word applications I often use:
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->
The syntax for it is made up by Microsoft. For all the standards care everything between the <!-- and the --> is pure comment: to be skipped as if it were not there.
[So actually parsing it makes the browser non-compliant ;) Guess IE8 will not be compliant on this :( ]
In your original post, you had:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
but I see you're using a WordPress blog. You must remember, ALL template files are relative to your theme folder in WordPress.
If you had simply applied your template directory call to the path, it would have shown up:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
