In my web page, I'm using 2 stylesheets :
<link rel="stylesheet" href="css/screen-layout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/print-layout.css" media="print" type="text/css" />
inside print-layout.css there is :
.ui-dialog * {display: none !important;}
When I viewed my webpage on IE7, it's supposed to ignore the media="print" one, but it didn't, it applied the display: none, causing all the elements to be hidden. And in the debugbar plugin for IE7, I can see that IE7 applied the print-layout.css file. How is that possible? or am I missing any requirements for using print on IE7?
Thanks :)
That syntax works even on IE7 but if you need to exclude that browser from applying your print style, just rewrite your last inclusion in this way:
<style type="text/css" rel="stylesheet">
#import url('css/print-layout.css') print;
</style>
since IE7 hasn't implemented the media type on #import rule.
Otherwise just wrap the second inclusion in a conditional comment, like so
<!--[if (gte IE 8)]><!-->
<link rel="stylesheet"... media="print" />
<!--<![endif]-->
so you include the print style for all browser except IE < 8.
As a side note: IE7 usage is globally < 1%:
see http://gs.statcounter.com/#browser_version-ww-monthly-201211-201304
Related
I have nearly finished the site i am working on, however IE doesn't accept some of my animations.
I know i can specify a IE only sheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css"></link>
<![endif]-->
However IE still runs the other style sheet, Does anyone know a way to force IE to ignore a css style sheet?
regards,
Jimy
Since CSS stands for cascading style sheet the idea for these conditional sheets is to override the "normal css"
<link rel="stylesheet" type="text/css" href="path/to/normalstylesheet.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="path/to/iestylesheet.css"></link>
<!--[endif]-->
Everything in the former would be over wrote by the latter stylesheet. If you have another specific reason to omit something though you can always use this.
<!--[if !IE]-->
<link rel="stylesheet" type="text/css" href="path/to/notiestylesheet.css"></link>
<!--[endif]-->
You can use this,
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
Good morning,
I am creating my 1st Wordpress theme from scratch and I have hit my 1st barrier.
If you take a look at my progress so far;
http://www.trevorpeters.co.uk/brad/?page_id=4
You will see that the CSS is linked correctly, but the H1 tag and P tag are not taking all of the attributes from the defined style, In Mozilla Firefox dev tools, some of the attributes are crossed out but are NOT being overwritten by any other styles.
Thanks, Brad Houston
Your styles get overridden by reset.css line 92. You can have a look at computed styles in the dev tools to have a look which style finally is applied to your element and the name of the source this style comes from. This is very handy when there are a lot of styles overriding each other.
You need to switch the order of your style.css and reset.css and then everything should be fine, because now your stylesheet overrides the default settings of the reset.css.
your style.css is above your reset.css.. what you do expect?
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
should be
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
check your header.php for the codes...
Looks like you've placed the CSS-files in the wrong order.
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
You reset your style after style.css.
You need to reorder the css stylesheets. You're putting the reset.css after the style.css so the reset is overlapping the style.
I am creating a template, and I have two different CSS styling sheets. One for IE and one for all other browsers.
I found a solution to target all browsers and IE browsers.
In my header I indicate:
<!--[if !IE]><!--><link rel="stylesheet" href="path/templates/thisTemplate/css/the-pack.css" type="text/css" /><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" /><!--<![endif]-->
The style sheets work fine. Except that firefox shows the text <!--[if !IE]> at the beginning of the page
Can you provide me with proper alternatives? Or why is this text showing, even though is in the head element, and what do I need to do for this not to show?
Thank you
The end of a positive conditional comment is just <![endif]-->, do not restart a new comment:
<!--[if IE]><link rel="stylesheet"
href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" />
<![endif]-->
Wikipedia says:
<!--[if gt IE 6]><!-->
This code displays on non-IE browsers and on IE 7 or higher.
<!--<![endif]-->
So, maybe you should change if !IE with if gt IE 9?
More info: http://reference.sitepoint.com/css/conditionalcomments
This should probably be the code:
<!--[if !IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/the-pack.css" type="text/css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" /><![endif]-->
Greetz,
XpertEase
An old question but more relevant than ever so another possible solution.
<link rel="stylesheet" href="/css/style.css" media="(min-width:0px)">
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->
You can avoid conditionals by using the media attribute, this is not understood by older browsers so the file does not get loaded.
What's the matter with my conditional comments? They apply both to firefox and IE!
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../App_Themes/css/stylesIE7.css" />
<![endif]-->
Is this normal? Am I missing something?
If by "visible" you mean they are visible in the source code, that is as designed. But Firefox will not be loading the CSS file, but treat the whole section as a comment. The syntax you use is correct.
Use e.g. Firebug's "Net" tab to confirm that the style sheet is in fact not being loaded.
In the source I see that you're including the stylesheets twice. Remove the last one.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="App_Themes/trimar/stylesIE7.css" />
<![endif]-->
<link href="App_Themes/trimar/styles.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/trimar/stylesIE7.css" type="text/css" rel="stylesheet" />
If you take a look at: http://www.nrgi-raadgivning.dk/erhverv
You can see in the code, that if you are coming from an IE, it should apply a stylesheet...
The IE stylesheet is supposed to set the margin:0 at the dropdown menu ul, but i doesnt?
Any ideas to whats wrong?
From your markup:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
However, the linked URL returns a "File not found message":
http://www.nrgi-raadgivning.dk/Files/System/ie7.css
Also, did you mean to link the same stylesheet twice? If so, you should be able to drop the second conditional comment.
Not found is a simple error irrelevant of the content within the CSS. Make sure your path (/Files/System/ie7.css) is right.