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
Related
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
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.
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
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.
This is driving me nuts. I'm trying to use a conditional IE6 stylesheet. I posted this test page here. Here is the code I placed in my head tags:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
The ie6.css should set the body background to red when viewed in IE6.
What's wrong here? I'm sure it's something dumb. Could someone please point it out to me?
It works fine for me. Run your test page through IE NetRenderer and you'll see the red background. Perhaps you're testing it in a version of IE other than 6?
You don't happen to be trying this using IETester?
Because with IETester, Conditional Comments will always resolve to the highest installed version of IE.
is the CSS file in the root folder (same folder as the HTML) ? it's good practice to put your CSS in a separate folder.
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
I just had a similiar issue. The conditional comments did not work correctly and I tried everything. The issue was that I had an X UA compatible meta tag in the header which obviuously influences the rendering. So keep watching out for that because that can be a reason.
<meta http-equiv="X-UA-Compatible" content="IE=7" />