Why is this ie6.css file not loading on IE6?
The 'TEST 123' text does show.
(the css works if I remove the condition)
I'm testing this on a virtual box with xp and IE6 from http://modern.ie
(I know the _ and * css hacks, but I need a very different layout on IE6)
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE Client</title>
</head>
<body>
<!--[if lt IE 7]>
<p>TEST 123</p>
<![endif]-->
</body>
</html>
You have to use the full url.
When using the syntax like that it won't work in your browser.
"http://yourwebsite.com/Web/css/ie6.css"
You should be able to use:
Target IE 7 and LOWER
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
OR
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
Related
Thought these were working fine, but upon just checking I get a blank page in ie9. If I use developer tools to switch to ie 8 or 7 the same result. Maybe I am just too tired to right now, but I'm not seeing anything wrong with the below to cause a problem.
The top adds a class to html ie 8 or lower so I can remove any use of the google fonts in my css. then the bottom loads the google fonts for anything not IE OR IE 9 or higher.
What is wrong with this?
<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="description" content="test">
<link rel="stylesheet" href="/css/base.css" type="text/css">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<!--[if gt IE 8]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
I'm not sure about these lines:
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
Shouldn't they be:
<!--[if !IE]> <html lang="en-US"> <![endif]-->
<!--[if !IE]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
?
It looks like your last conditional statement is messed up.
<!--[if !IE]><!-->
remove the extra
<!-->
and where it closes
<!--<![endif]-->
change it to
<![endif]-->
My WordPress site is having some major IE issues that include jQuery, box-shadow, and other strange CSS problems.
Would my doctype be to blame?
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NA-net | NA's Communication Network</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven-child/style.css" />
<link rel="pingback" href="http://121.5.7.109/na_comm_new/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="NA-net » Feed" href="http://121.5.7.109/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net » Comments Feed" href="http://121.5.7.109/na_comm_new/?feed=comments-rss2" />
<link rel='stylesheet' id='wp_sidebarlogin_css_styles-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/style.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='bbp-default-bbpress-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/bbpress/bbp-theme-compat/css/bbpress.css?ver=2.1.2' type='text/css' media='screen' />
<link rel='stylesheet' id='slider-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/css/slider.css?ver=1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/js/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/js/blockui.js?ver=1.0'></script>
<script type='text/javascript'>
Doctype is ok, but i would recommend to use this one:
<!DOCTYPE html>
<!--[if lt IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 lt-ie6"> <![endif]-->
<!--[if IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="modern"> <!--<![endif]-->
<head>
...
Provided your code is standards compliant, it is unlikely your doctype is causing the problem. (Obviously the quick way to check is easy: change it to the HTML4.01 doctype and see if anything corrects itself!) The 'generic' HTML doctype should trigger standards mode in all modern browsers, and even legacy browsers should switch to full or near standards mode in the presence of any doctype. Given you tagged IE9 in the question, your problems are likely due to IE9 being only partially standards compliant past CSS 2.1. I suggest trying to isolate your problems individually.
Box-shadow: According to MDN, you may need to explicitly set border-collapse:seperate for it to work in IE.
Other: I see you use conditional comments to sniff out IE6-8. Perhaps you need to extend this to IE9? Also watch out for any nasty inline CSS hacks...
I am using three conditional CSS files in my site, one for ie7, one for ie8 and one for IE only. IE7 and 8 are parsing properly when I parse the skin but for some reason, IE only conditional does not want to parse correctly, leaving this when the browser renders
<!--[if]> <![endif]-->
If however, I add that conditional statement directly to the parsed ascx page, the conditional works properly.
Here are the three conditional statements:
<!--[if IE]>
<link href="/portals/0/skins/sunmedia2011/css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="/portals/0/skins/sunmedia2011/css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="/portals/0/skins/sunmedia2011/css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
Any thoughts?
Thanks!
I know this is old but could be helpful to someone:
<!--[if IE]>
<link href="<%= SkinPath %>css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="<%= SkinPath %>css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="<%= SkinPath %>css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
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" />
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.