I'm testing my website on different browser and everything seems working perfectly fine until i test it on Internet Explorer (Browser Mode: IE8 and Document Mode: IE8 Standards) i have no idea actually on what's happening but when i switch to Document Mode: IE9 it will work :(..
Anyone experiencing this kind of issue? hopefully someone can give me some explanation or solution on this one thanks in advance guys
By the way i'm using wordpress on my website and i try to use the Respond.js plugin and still no luck :(
Use the below code which will include these JavaScripts for IE versions less than 9. Using the html5.js file you can also use HTML5 tags in IE8.
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
IE8 doesn't understand media queries out of the box.
If you need this functionality in IE<9, one option is to use respond.js .
Another option is css3-mediaqueries-js
They are similar and I've had good success with both. Depending on the specifics of your site, sometimes one might work better than the other
Good luck!
Related
is there any general reason for which Font Awesome doesn't show up in IE 10?
Another question - what's the #font-face thing all about? Do I have to use it? I haven't done it so far and it works well in Firefox and Chrome, could that be the reason for IE?
(excuse my ignorance, I'm a complete newbie)
I had the same issue, the actual cause was https secured connection
I was using https protocol changed it to http
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
I Hope it helps
If it is working on other browsers, make sure you are not in compatibility mode or have not accidentally put your site on the compatibility list in IE.
If it doesn't work in others, it has to have 2 classes: fa AND fa-blah (assuming Font Awesome 4.x; Font Awesome 3.x has different notation)
Also, check your developer tools F12 to make sure all the fonts and CSS/JS is loading into the site.
I use Unsemantic for the first time, and I forgot to check my page on IE8. Here is the disaster : http://canapin.com/web/meteo/
Unsemantic is supposed to be IE8 compatible, but my page is messed up, and I can't figure out why.
Any idea? :(
As stated in its issue tracker, since IE8 doesn't support media queries, Unsemantic grid offers a fixed-width layout for it, through a separate css file inclusion:
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="./stylesheets/ie.css?1389034275" />
<![endif]-->
Note the conditional comment avoiding the separate css for mobile versions of IE (they are supposed to support media queries):
I suppose you can download the source of the separate css from here:
http://unsemantic.com/stylesheets/ie.css
So, if you accept to have an IE8 with fixed-width layout (and it seems very reasonable to me), you don't need a javascript fix ;)
Bye bye!
for IE8 and lower you have to include a shim, which comes with the Unsemantic files.
Include the following code in your head and you should be fine:
<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->
So, just point to the html5.js file and this should fix it. Let me know whether this worked for you.
Cheers, Marvin
I know there is the conditional comments:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
<![endif]-->
to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?
If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.
However, I would agree with the comment by #Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.
All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.
If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.
There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)
You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.
There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.
$(document).ready(function() {
if ($.browser.mozilla && $.browser.version == '2.0') {
$('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
}
});
I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)
I understand from my research that IE8 does annoying things like forcing itself into IE7 mode for local intranet hosts and local IP ranges. I understand from a previous question that there is no way to use conditional statements as, irrespective of whether IE8 is rendering in IE8 or IE7 mode, it will still only use the <!--[if IE 8]> conditional.
Since this question was asked a while ago (during the IE8 beta phase by the looks of things) I am wondering if this has changed or if there is any other way using conditionals to determine if IE8 is in compatibility mode.
Thanks!
No, you can't do it using conditionals.
The best way to do it is to use the document.documentMode property as described in the link Pekka posted. How can I detect if IE8 is running in compatibility view?
http://msmvps.com/blogs/paulomorgado/archive/2010/04/05/defining-document-compatibility-in-internet-explorer-8.aspx
In the end, I chose to mix the two common strategies to deal with this bug.
I created an override CSS file, which I import using conditional comments. In the event of IE 8 or 9, though, this override doesn't look as good, so I include the 'force IE into latest rendering mode' header switch, as shown below.
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="/Content/IE7Overrides.csss" />
<![endif]-->
This provides IE7 with a decent failsafe, but forces IE8 and IE9 to show it in the latest browser, which will show the CSS-based table correctly.
I'm a bit stumped on this one. I am referring to this page - http://savitarbernese.com/welcome.aspx. At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. I'm guessing this has something to do with the div overflow? I'm not sure...
What's the best practice for cross-browser compatibility when using DIVs?
Cheers,
D.
Add
overflow: hidden;
to #container and to #content in your css and presto!
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating.
What's the best practice for
cross-browser compatibility when using
DIVs?
Allways code for firefox first, then for IE.
You are starting in the wrong end. If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either.
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around.
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. That helps a lot when you want it to render the same across browsers.
Thanks - that's a fair comment. My dev machine is down and I only had access to IE7 at the time. Normally I would definitely start off with Firefox 3.5 and go from there.
That aside, it's a small problem that is hampering me at the moment. In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. I have changed the doctype to use XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here?
Thanks again.