I build a wp template with the following in the header:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
In the stylesheet I use #media queries, eg:
#media only screen and (min-width: 1100px) {
#wrapper {width:1280px;}
}
Style and template was fine until I noticed I missed the doctype, so I added this to the header as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
No all the styles are incorrect, media queries seem to be ignored, I can see no style in the developer inspector (Firefox, chrome, safari etc).
If I remove the style in the media queries are shown, add it again the styles are removed.
Issue is see on all browswer.
Is there anything obvious I am missing?
Doctype has no effect on your media queries.
You can add some support though .
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
These will offer cross browser reference support and will most likely solve your issue.
See similar post : CSS3 Media Queries - does not work in some browsers (officially supporting MQ)
I had a similar problem with a style class I was applying to a DIV.
.aclass { ... } within #media and a min-width "disappeared" when I added the DOCTYPE html tag, then "reappeared" and worked when I removed the DOCTYPE.
Explicitly including the element in question solved the disappearing act, that is...
DIV.aclass { ... } works properly.
Related
I don't understand why the fonts are bigger in IE8 and IE9. I am using Helvetica font. All other browsers are okay. I got problem only in IE8 and IE9. The line-height is also bigger. I cannot post the Link to my site here for some reason. But it's really simple use of css. Here is how my HTML header looks:
<!DOCTYPE html>
<html lang="se">
<head>
<meta charset="utf-8">
<title>Digi...</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="/resources/layout/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE like:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets is YUI.
see this: http://yuilibrary.com/yui/docs/cssreset/
Yes IE change the way he read the css or the styling from one version to another. In general its only the distance calculation that change. So all the padding/margin. line-heigh etc. The same way that when you look at a website in chrome,firefox,saferie,ie the website isn't exactly the same.
If the problems is really important for you (normally I ajust the css so that even with the difference the website) you can use CSS Conditionnal comment like this :
<!--[if IE 7]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
If you use css:
.ie8 body {
//IE 8 CSS
}
.ie9 body {
//IE 9 CSS
}
Or use the tag on you're meta tag
<!--[if IE 8]><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.8, minimum-scale=0.8, maximum-scale=0.8"><![endif]-->
(or change the scale to whatever you want) do the same for IE 9.
Edit:
Sorry #Tasos and #user3830694 I was slow to write the post and saw that you provided similar answer by the time I was finished :P
Try modernizr. It will try to normalize the CSS styling between different browsers.
http://modernizr.com/
So I have a very strange problem on IE8 :
I am using fontawesome and I get some encoding problems but not for every icons I put in the HTML.
JSFiddle
On JSFiddle everything is ok... but on my website it does not display the first icon (the red asterisk with the black background).
When I go in the menu of the browser : View>Encoding>UTF-8 (which is already set), then it is ok !! (how strange this is....)
I have set the encoding style in my html file : <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
I can't find if it is a bug or if I'm doing something wrong.
Any ideas ?
EDIT
following this answer I added this at the beggining of my code :
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8" />
I had this before :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
I had also try <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
When I first load the page (typing my url in the bar), every icon is showing right. But when I reload (CTRL+R or any refresh method), the first icon is replaced by an empty rectangle...
The only way (I found) to solve this :
hard refresh icons on domready :
$(function () {
// only on IE :
// Solve font-awesome loading troubles in IE8 & less :
// Solve also performance issues by removing animations
if (document.getElementsByTagName("html")[0].className.indexOf("ie") !== -1) {
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important;}';
head.appendChild(style);
setTimeout(function () {
head.removeChild(style);
}, 0);
}
});
with this in HTML :
<html lang="en" <!--[if IE]>class="ie"<![endif]-->>
I hope this will help.
Try setting the charset like this: <meta charset="utf-8" />
I think this is because you are not defining a font-family in your CSS. It is therefor falling back to your browser's default font in which the character doesn't exist.
This may also be an issue with IE8. Different browsers require different filetypes for embedding. Make sure you are using all the filetypes included in Font Awesome inside of your stylesheet.
Hope this helps!
Is it possible you have your browser set to a specific encoding?
In IE, Go to View -> Encoding and click "Auto-Select" and relaod the stylesheet.
I've created a mobile first responsive web page. It is working lovely in all the major browsers to my liking and is looking good on mobile phones and tablets too.
Last part is I want it to look decent in IE8.
I've read here on #3 (http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/) you can simply serve a specific style sheet for IE9 and lower with the desktop version styles using conditional comments.
I created ie.css with my desktop styles and have added this conditional commenting to the head section however no luck, I still get the mobile styles in IE8 and lower.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>Page Title</title>
<link rel="stylesheet" href="style.css" media="all">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Any ideas on whats going wrong? I've double checked that my ie.css file is sitting there in the directory right next to my index.html just like style.css. Is there some other reason this would not work?
Thanks,
if i read that correctly, you just want to target ie8?
first off, place html5shiv above all of your style sheets...unless you have style sheets that literally have no styles for ie. html5shiv needs be rendered first so it can tell ie those are elements and it needs to style them accordingly.
i'm still confused about what you want exactly, and not sure if you are targeting less than ie8, so lets just fix ie8 issue(s):
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" media="all">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
EDIT
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<![if !IEMobile]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]>
all we've done is move html5shim above all of the style sheets. then comes the style sheet for every other browser. then comes a style sheet only for ie8. then comes the style sheet for less than ie 8 and not ie mobile.
take note: i changed the version from less than 9 to less than 8, so there's no chance of cross-referencing each other, cancelling/adding styles to each other.
again, i'm not clear thats what you wanted, but this fixes the issues i see. lmk if i misunderstood something.
EDIT: looks like the mobile not (if !IEMobile) needs different syntax, so i'm assuming trying them separate will fix it. here's reference: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
Use Respond.JS - a javascript polyfill to make css media queries work in IE8
You could have styles within your mobile stylesheet that aren't decalred within yout IE sheet. therefore they aren't getting overwritten. You could exclude the mobile stylesheet on non IE stylesheets.
<!--[if !(IE)]><!--> <link rel="stylesheet" href="style.css" media="all"> <!--<![endif]-->
<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" href="ie.css" media="all"><![endif]-->
Hope it will help you, add some jQuery to remove your responsive stylesheet when web page load in a ie8 below versions, So add new style sheet for ie 8 and below versions
if (jQuery.browser.version >= 8.0) {
$('link[rel=stylesheet][href~="style.css"]').remove();
}
or if you need responsive for 1.e8 0r 7, make sure that you are added these meta tags and scripts below
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
I'm using bootstrap 3 and have to support ie7. Ideally I would like to use font for icons. They work great in all other browsers except ie7 :(
The icons appear fine using ie on the font awesome website - I have had a look at what's different and I cant see anything out of th ordinary. I've followed the instructions and added the css in order etc...
I'm not using less. Here is a link to my test site https://googledrive.com/host/0B8UWGEiox1HOZnV6ZTA3bzNvMTA/testsite.html
The test site show font awesome using ie tester however that isnt 100% accurate. I am using true ie7 to test on and the font is simply squares.
Please can anybody see what's going on here as I'm at an end with it!
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" media="screen">
<!--[if lt IE 8]>
<link href="css/main-ie7.css" rel="stylesheet">
<![endif]-->
<link rel="stylesheet" href="css/font-awesome.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
Font Awesome version 4.0.1 does not support IE7, see the bottom of their getting started page: http://fortawesome.github.io/Font-Awesome/get-started/
Version 3.2.1 has support, see their IE7 section at the bottom of their 3.2.1 getting page
http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/
There is an app called Icomoon that can create custom icon fonts, and can include icons from Font Awesome. Their old version of the application generates a Javascript file for IE7 that will allow the icon fonts to be used, the old version of the app is here http://icomoon.io/app-old/
Perhaps the charset is assumed wrongly. Try including <meta charset="utf-8"> in the <head>.
If your icons are not intented to change at runtime, you can use the following CSS to add support for IE6 and IE7 for whatever icons you need :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icons are intended to change at runtime, you could do something like this instead :
.icon-glass {
*top: expression(0, this.innerHTML = '');
}
Unfortunately, this second approach is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.
i just visited apple.com and they use some html5 tag like nav. it is working in all broswer but i i try to test html5 code it is not working in ie8 and ie7. i am not getting what is the problem how apple site working in all browser.
<!DOCTYPE html >
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html 5</title>
<style>
#header { margin:0 auto; width:980px; overflow:hidden; border:solid 1px #F00}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header id="header">adfadf</header>
</body>
</html>
older versions of IE don't treat the new HTML5 elements like header, nav, article, footer, address as "unknown" elements.
You can simply introduce the new elements to the old IE family members by using a simple JavaScript approach:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
Check out the article HTML5 Shiv and e.g. the modernizr framewoerk
HTH,
--hennson
Try to use this script to get html5 work: http://www.modernizr.com/download/
IE8 and IE7 aren't HTML5 compliant, so your code won't execute. I'm guessing the Apple site has caveats to test which browser you are using . Any control in particular you're looking to use?
It depends what you mean by “not working in ie8 and ie7”. I see you’ve got HTML5shiv in there — that should make IE recognise your <header> element at least. Is the red border showing up at least?
Bear in mind that IE (just like older versions of Firefox) won’t apply any default styles to these elements, so you’ll need to add those too, e.g.
header {
display: block;
}
Reset stylesheets like Eric Meyer’s add this CSS for you:
http://meyerweb.com/eric/tools/css/reset/