How can I make a specific CSS stylesheet for Internet Explorer 8?
I mean, how can I load it only if the browser is IE8? (And not IE7 and IE6)
use this
<!--[if IE 8]>
<link href="/stylesheets/iestyle8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
http://www.quirksmode.org/css/condcom.html
You can use the following:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" media="screen" />
<![endif]-->
Related
I have three stylesheets; one for IE7, one for IE8 and one for IE9+ / Firefox / Chrome.
I want to use conditional statements to link each of these to my document. I have written these statements:
<!--[if IE 8]>
<link type="text/css" href="ie8.css" rel="stylesheet"/>
<![endif]-->
<!--[if IE 7]>
<link type="text/css" href="ie7.css" rel="stylesheet"/>
<![endif]-->
<!--[if ?????]>
<link type="text/css" href="style.css" rel="stylesheet"/>
<![endif]-->
I am unsure of what to write in the if statement of the final conditional. I need something like:
<!--[if IE 9+ | !IE>
Which would mean IF IE9+ or NOT IE.
Is this achievable using conditionals?
Found the answer:
<!--[if IE 8]>
// ie 8 stuff
<![endif]-->
<!--[if IE 7]>
// ie 7 stuff
<![endif]-->
<!--[if !(IE)]><!--> i am not ie <!--<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
gt means "greater than", gte means "greater than or equal".
Edit
from IE Conditional operator: OR ... if is greater than ie9 or not IE
<!--[if gte IE 9 | !IE ]><!-->
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
When I tried to validate my website on CSS Validator it shows errors at universal selector "*" Parse error. Can somebody help on this? I used the twitter bootstraps css.
like following code
.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
The code uses the (in)famous Star Html Hack, which means using intentionally broken CSS code in order to deal with IE 6. Just ignore the error messages.
Hi now remove * of width
now if you are using IE than create a saparate CSS file and link to your document
as like this
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Link
My website: http://botvps.com
The text on the button is not appearing.
I have already made an IE css for IE 8 or lower.
What do I need to do?
Regards,
LB
You are using Cufon 1.09, an outdated version. Please use the new 1.09i version of Cufon, which adds support for Internet Explorer 9.
I tested your site with 1.09i, it renders fine then!
Download cufon-yui.js from the following website:
http://cufon.shoqolate.com/
Replace the following file on the server with the new javascript:
http://www.botvps.com/js/cufon-yui.js
you can use this meta tag line and put it inside the <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
this will make ie9 work in compatibility mode to ie8 and will solve the problem if you don't
have problems in ie8 stylesheet
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="layout.css" />
This is my website, it works fine on chrome, firefox and IE 9. When i try it on IE 7 & IE 8 the IE comments that I use for css is not showing at all. My website: http://www.chan-leung.com
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ieHacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/ieHacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
The css files works fine locally, but when i upload to my hosting, the css doesn't show. I'm using IE debugger for browser testing (for IE). The F12 key for IE. When i try to look up ieHacks.css & ieHacks7.css, nothing is showing. I'm stump as to what would be the reason why the ie comments is not working.
Any help or suggestion would be greatly appreciated.
Perhaps you have names the css files incorrectly?
You site is maybe trying to use css/ieHacks.css and css/ieHacks7.css but the actual files are css/iehacks.css and css/iehacks7.css
Also try using absolute urls and see if it makes a difference e.g:
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/iehacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/iehacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
Also, just a note, you are doing a more general assignment first and another more specfic one second, was this intended? The first css file will be applied to ie7 as well as the second, more specific one.
UPDATE:
Your site css seems to be the following which isn't like you said in your question:
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/iehacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/iehacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
<!-- [if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
If I want to add padding based on the browser the user is viewing the page in, is there a way in CSS that I can do something like:
if IE do
padding:5px;
else if not IE do
padding 10px;
Here is a great reference: Quirksmode.org Conditional Comments.
Although the control structure is in the markup and not the CSS, it accomplishes your goal and is usually considered the best practice when serving browser-specific stylesheets.
The best-practice way is to have a single stylesheet for IE-only fixes, like so:
<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->
Then just override specific problem-causing styles in the ie-styles.css file.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
For complete reference on the topic, Chris Coyier: How To Create an IE-Only Stylesheet
Although the IE conditional can be used only in html and not in the CSS, you can use the following in your CSS files for your quick-and-short tests/hacks.
p {
/* all browsers */
background-color: red;
/* for IE7 and below - append a * before the property */
*background-color: blue;
/* for IE6 and below - append a _ before the property */
_background-color: green;
}
While you can use this for your quick and short requirements, I think, you should follow the suggestion by Mark Hurd given above for production-level heavy codes.
Here's a cleaner way to target IE 10+ in CSS only
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
(Source: Phil Newcomer)
If you don't mind ugliness in your code, you can use something like the Holly hack:
div { padding:5px; }
* html div { padding:10px; }
There's a neat CSS Zen Garden example that does this to present two distinct designs, but I don't recall its name.