I have the following code in my html5.Master file for my C# ASP.NET pages using Twitter Bootstrap. Still some pages are rendered by IE 9 in Quirks 5.5 mode. Is there anything else that can be done to get them to render correctly and print correctly?
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="bootstrap.css" rel="stylesheet">
<!-- CSS concatenated and minified via ant build script-->
<link href="<%=Page.ResolveUrl("~/css/bootstrap.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/docs.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/prettify.css?v=2")%>" rel="stylesheet">
<link rel="stylesheet" media="print" href="<%=Page.ResolveUrl("~/css/print.css?v=2")%>" />
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script> window.jQuery || document.write("<script src='/scripts/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
</head>
Related
Where am I going wrong please guys, tried a lot of variations from various sources, but to no avail - Here is the code, I hope you can help as going slightly bonkers - thanks in advance guys...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.jpg">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.jpg">
<link rel="stylesheet" type="text/css" href="assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
First: I would try adding an additional forward-slash before your CSS paths, e.g.
<link rel="stylesheet" type="text/css" href="/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
If that doesn't work, then try testing the absolute paths in place of the relative ones, e.g.
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/style.css" />
If the latter still doesn't work, then there could be a problem with the formatting of your CSS file(s).
Ive been working on trying to change the font to CircularPro Bold , however when I load my page it doesnt render , instead it defaults to Times New Roman. Could use some help to figure out why its not rendering
I am using one layout for my static landing page.
Thanks
Layout.erb looks like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Info</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://lineto.com/The+Fonts/Font+Categories/Text+Fonts/Circular/Bold/" rel='stylesheet' type='text/css'>
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/modern-business.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Modern-Business.css looks like this
#font-face {
font-family:"CircularPro Bold";
src:url(fonts/lineto-circular-pro-bold.eot?#iefix) format(embedded-opentype),
url(fonts/lineto-circular-pro-bold.woff) format(woff),
url(fonts/lineto-circular-pro-bold.ttf) format(truetype),
url(fonts/lineto-circular-pro-bold.svg#CircularProBold) format(svg);
font-weight:400;
font-style:normal;
font-size: 4em;
}
h2{
font-family: 'CircularPro Bold';
}
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]-->
Both of my last 2 css pages (800px.css and 800pxland.css) are being neglected in rendering my website on a tablet device. I cannot figure out why, all of the other ones work just fine. As a matter of fact, they worked just hours ago but now no matter what I change and to what degree I change it, nothing works. I just started using Bluehost's CloudFlare service so I'm not sure if that has something to do with it (yes, I am FTP'ing while in dev. mode on CloudFlare). I have been using google chrome as my browser on the tablet the whole time. Ill get the posted p and hopefully it'll help. Thanks!
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if lt IE 9]>
<html lang="en" class="ie8">
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9">
<link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
As a matter of fact, they worked just hours ago...
If by this you mean that the 2 ipad CSS stylesheets were working and now they aren't, then to me it's implying either an issue with them being cached via CloudFlare or there's a CSS error on the stylesheets or styles from another stylesheet are taking precedent.
You could test each possibility by
save duplicates of the last 2 stlyesheets and update the HTML accordingly
eg <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css"> . This would rule out a caching issue
validate the last 2 stylesheets # W3 CSS validation
add a new test selector on each of the last 2 stylesheets and see if you can get it to stick, eg body{background-color:green !important;
These are the most likely causes that come to mind for me.
Good luck!
`
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...