i was wondering if it was possible to completly change the site, when viewed in IE?
Like have a site that would only work in IE?
As of right now, my site doesn't work quite as i wanted it, in IE9 or below, and i thought of making a different site simply saying something in the lines of "Your browser is outdated, please update 'LINK' ".
I dont want to put a banner on my website, as the website will still be seen behind it, and trust me, it is really ugly in IE9 and below.
Unless i can make the banner take up the entire page somehow?
Please help a new guy..
Cheers!
You can use something like WhichBrowswer to detect what browser/version someone is using and then redirect them to another page. All of this can be done in a few simple lines of js
An example:
$(document).ready(function() {
Browsers = new WhichBrowser();
if(Browsers.isBrowser('Internet Explorer', '<=', '9')) {
window.location.replace("http://example.com/upgrade-browser");
}
});
Use conditional statements in the head of your html (index.html) document that will specify what to do with specific IE browsers. See below for example for an IE 9 or less stylesheet. Below is saying if the user is on IE 9 or less then use this stylesheet and you can write specific styles. Also see the article link below for a detailed explanation.
<!--[if lte IE 9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" media="screen, projection" />
<![endif]-->
Reference - http://www.quirksmode.org/css/condcom.html
Related
I'm trying to get my website compatible with internet explorer. It looks great in chrome, safari and firefox, but i's very wrong in IE.
Is there any way to make it compatible, without changing or creating another css ?
search for IE style sheet. You have to tweek it a little with the elements that you need to change for IE in the new stylesheet. Read up here about it
Put this within the <head> tag of your file
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Another that I like to use is javascript to use the same stylesheet but uses css selectors like. .ie .container for internet explorer
you can download it here it's called CSS Browser Selector
I looked at your code (before you edited out the link from the question), and the first thing that jumps out is that you've got two X-UA-Compatible tags, one saying IE=8 and the other saying IE=edge
You should only ever have one of these tags, and in most cases it should only ever be edge.
Get rid of the other one; it is causing problems.
Newbie. Theme is not behaving in IE8. Checking out source code, noticed theme demo, which looks great in IE8, has this code at end of "the head part" and mine does not:
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><link rel="stylesheet" id="themetastic_ie8" href="http://themetastic.damojothemes.com/wp-content/themes/themetastic/css/ie8.css" type="text/css" media="all"><![endif]--></head>
Crossing my fingers that's the problem. Do you think this looks like the culprit? If so, after I change the href to point to my ie8.css file, how would I get this code to work and added to all of my pages in WordPress?
Appreciate your insight.
Theme: http://themetastic.damojothemes.com/sidebar-left/
My site: www.thetrafficticketman.com/scott-markowitz
You can add that code to your theme's header.php file, in between the and tags. It may make a difference if you add it before/after the PHP function call wp_head();....so try out both and see what works best for you.
I read this answer to another so question, which is exactly what I need. Although, as stated in the answer, it looks bad in IE7. I would like it to look ok in IE7. The first column does not need to be fixed in IE<=7, but the table (and the first column) should be readable.
Does anybody have any idea how to hide some parts of the CSS in IE7, so it looks like a normal table? If so, you can always fork http://jsfiddle.net/emn13/YMvk9/ to show me :)
You could write a separate stylsheet for IE to use:
<!--[if IE]>
<link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->
<!--[if !IE]>
<link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->
This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.
The second stylesheet there will be used only if the browser is not IE so if everything displays correctly in Chrome and Firefox, you can leave those rules untouched. Then just copy the rules you need for IE into it's stylesheet.
Best practice is to write the CSS so that it displays the same in all browsers, but this is a lot less frustrating!
Hope this helps
Reference: http://www.quirksmode.org/css/condcom.html
I fixed the issues and attached the files http://jsfiddle.net/fJJvG/2/. One thing, you must download the jquery plugin from http://jquery.com/ and put in your header. then you will get the result.
Can anyone help me with this? http://173.199.158.105/about-our-company.html shows just fine in Firefox and newer IE versions. But when previewing it in IE6 using Adobe's Browserlab the left sidebar words are cut off. The word customer service is messed up. You can only see "stomer Service". I have no idea what's wrong. Anyone have any insight on this?
It sounds like the IE 6 double-margin bug.
http://www.positioniseverything.net/explorer/doubled-margin.html
I also like to add this to my sites...
http://ie6update.com/
One possible solution, although not a nice one is to use conditional comments for IE6, so loading a separate CSS depending on the users' browser after declaring the normal CSS. Might be more work in the end to maintain but it does solve the bug mentioned by Sparky672.
So something like this:
<link rel="stylesheet" href="http://www.mydomain.com/index.css"/>
<!--[if IE 6]>
<link rel="stylesheet" href="http://www.mydomain.com/indexIE6.css"/>
<!--<![endif]-->
See link: http://www.quirksmode.org/css/condcom.html
Just made a site using great standards compliant semantic HTML and CSS. It looks great in Gecko, Web Kit, but IE7 mangles it (of course). Any progress yet on this front, or do I have to go through a tonne of hacks as is standard with IE.
Try this
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
Or you could write a separate css file for IE7
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
There are several well-known hacks for hiding IE-specific demangling rules from comformant browsers. Most of them depend on IE mis-parsing certain things, e.g. "* html ... { }" which other browsers will ignore. A simple google search will show any number of these.
My rule is first to make the page work in FF (or similar), and then break it so it works in IE.
I find that developing a site first for IE, then adapting it to other browsers is less time consuming than the other way around. But, it's a little late for that!
I would suggest that you have a separate CSS file for IE (just copy and paste and rename current CSS) then have a browser sniffer and script that requests the IE CSS for IE users. Then rewrite just the IE CSS. Does that make sense? At least that way, the site is still up for the other browsers and you're just working on IE.