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/
Related
I have a .html file which is identical to the one on CSS Zen Garden, a .css file which I restyled to my liking. Those two files and all materials are put in the same folder on Desktop. The page opens and is styled when using Google Chrome and Mozilla Firefox, however there is no styling whatsoever when trying to open the .html file with Internet Explorer and Microsoft Edge.
How do I resolve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS"
href="http://www.csszengarden.com/zengarden.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be
accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
As it turns out, I didn't take a look at the HTML well enough.
Deleting the... comments? around the line made it work in IE and also Microsoft Edge.
From
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
To...
<script src="script/html5shiv.js"></script>
should work...
I have a situation where the following x-ua code is added to the header
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
and it works well in IE versions 10 and below. But it makes some functionalities not working in IE11.
Functionalities will work fine in IE11 if the meta tag is removed, but now i'm not in a position to remove the meta tag completely as my application has to support IE9+ versions and the removal will make functionalities not to work in IE10
Try this:
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<![endif]-->
<!--[if gt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
Note: IE10 doesn't support conditional comments https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
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.
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]-->