The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
I'm new to programming in general, especially CSS. I am currently working on a new website for train enthusiasts. I'm doing it from scratch so that I can get some experience in HTML, CSS, PHP, MySQL, etc.
Anyways, I've run into a problem. I've searched Google for a solution, but haven't been able to find one. My CSS seems to be compatible with every web browser on the market EXCEPT Internet Explorer. I don't really know how to explain the problem unless you check it out for yourself. It's as if my header and left menu are the only styled elements, but my content and right menu are pushed to the right and not styled. Check this link in IE and another browser respectively. You'll see the difference.
So my question is this: How do I fix it? I know it must be an IE bug since it works in every other browser, but I don't know what it could be! If I need to post my CSS script, let me know. Thanks in advance for any help you guys can offer!
In your style sheet you have a superfluous width:100% on a div element (block level elements naturally have a width that fills their container). IE is interpreting this 100% as that of #container. You can correct the styling issue in IE7 (theoretically) by removing this width:100% at line 119 of styles.css. I theorize that this is cased by how IE7 interprets display:inline-block
I must warn you, however, that ensuring compatibility with IE 7 and lower is a major pain in the arse and totally not worth it. :)
Which version of IE are you using to test it?? I checked it on Firefox, IE9,8 and 7. looks fine on IE8 and IE9. While there are few issues on 7. You could use conditional commenting to fix issues in 7.
create a new css file specially for IE7 and then
use a code like the following in your header
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
now play around with ie7.css till things look better. The good thing about this method is you can fix issues in IE without interfering with other browser rendering. You could also use "ietester" and debug bar to determine what exactly is wrong. im not able to find the exact link right now but google should help.
You could read more about conditional commenting here http://www.quirksmode.org/css/condcom.html
I am new to html5, html and JavaScript. My website http://www.countrybait.com/ is looking perfect in Chrome and IE9 but its broken in IE8. Problem is my client has a IE8 and when I showed him it was bad looking. I tried alot to fix this but couldn't able to fix and don't know what to do to fix and atleast get a clean view in IE8. So please seniors help me. Waiting for your positive help.
There are many differences between the browsers you mentioned. Each one renders css a little bit differently, especially IE8. IE9 has a developer tools set (press F12 or look under Tools icon). There you can choose which browser mode you would like to see and it should render the page according to that setting. You can then see what items are causing the layout issue and make the necessary changes.
I always build to Chrome or Firefox, then go back and make it work in IE.
Depending on your site, it might take a bit to get everything working in IE8. There is not a simple fix.
I tried turning on "Compatibility Mode" in IE8, and it makes most things be in roughly the right position (notable exceptions are the top menu navigation and the main text content).
So one strategy you might like to employ is to try to get it to look good in IE7 / IE8 Compatibility Mode, then you can add a meta tag like:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
to your page to force IE to run in compatibility mode. Note you may need to surround this with IE conditional comments to make sure it doesn't run in IE9, which looks fine.
e.g.
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
Oh the newbie pain of IE, hurts dont it?
I realize that your are new to this kind of thing but see how quickly you can get up to speed with Sass/Compass. Compass comes with a lot of helper shortcodes and cross browser handeling. Its the new hotness and the real pro's use it (like myself :D )
Sass = shorthand css w/ nesting (so clutch), variables (nice and dynamic), mixins (templates)
Compass = framework to avoid cross browser issues and css prefixes, and some other cool junk.
Do it, seriously... I wish somebody told me to sooner.
I am a newb for sure. I have been developing in the firefox, and just barely checked in IE. Someone please help me out. Don't know where I went wrong. Thanks!
www.clgproperty.com
"Develop your site using Firefox or Opera. Then test it in IE and Chrome
Don't do inline styling. Use css files.
Continuously check that your design works in these 4 major browsers
Firefox is the best browser for developing websites. Why? Because you can use the FireBug plugin that helps you analyse your html output code and debug javascripts.
Ok, this is all my opinion, but it works for me :)
This is one of the many issues with programming and designing websites. Different browsers render CSS differently (Some are more standards compliant than others). Internet Explorer is notorious for being terrible at rendering CSS.
Your only option is to rethink the design and create a new one that works in both browsers from the get-go, or to use Conditional Comments to include specific CSS for a specific browser, such as:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Start with a strict doctype.
Add this to top of your page (there should be nothing else in front of it, even no whitespace):
<!doctype html>
This way IE will behave according the w3 standards like as the other (decent and real) browsers. This must remove the most of the webdev pains, including the IE box model bug.
As second step, make use of the w3 validator. This isn't the holy grail, but this should spot on the most of the common problems. When fixing w3 validator problems, do it step by step and retest. Most of the subsequent errors are just "sub-errors" caused by one of the earlier errors.
Good luck. And indeed, welcome at the webdev world :)
I am aware that there are probably other questions regarding this topic. I guess that every web developer goes through this with IE.
My problem:
I am developing a web-based application fully based on Javascript. I am a Mac user. I was really happy that everything worked great in Safari, Firefox and Opera. I then asked a friend with Windows to check it with Internet Explorer, and things don't work as well. My application is very sensitive to the HTML standards.
The main problem is the CSS layout. The JavaScript itself seems to be working properly thanks to jQuery for portability.
My question:
How do you deal with Internet Explorer? Should I create a new CSS that is only loaded on Internet Explorer? Should I create a new version of the application only for Internet Explorer? How do you normally handle this? The application is pretty big both in feature design and in layout design.
Edit:
Using the CSS reset as suggested by Nosredna, already removed almost half of the problems. I guess it really is a good practice. I noticed that SO also uses it.
Do you specify a valid doctype? You can get Internet Explorer to be a bit more compliant by switching it into standards mode. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2
Do you use a browser reset CSS file? That can help bring the versions together. http://meyerweb.com/eric/tools/css/reset/
Be aware of IE's CSS bugs: http://www.positioniseverything.net/explorer.html
For the skeleton of your layout, consider using markup that is known to work, such as http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts or http://960.gs/ for liquid or fixed layouts, respectively.
Keep up with JavaScript differences between browsers. jQuery handles some of them, but not all of them. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/
Yeah, IE is a pain. If you want it to work in IE, you really want to test in IE every couple days. You don't want to save the pain for the end--you want to handle the nightmares one at a time.
By the way, if you think IE is a pain, try looking at your page with a mobile phone. The other day I went to REI.com with an iPhone and the middle fifth or more of the screen was taken up by a bunch of garbled markup that rendered as text.
Conditional comments.
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
<link rel="stylesheet" href="normal.css">
<!--[endif]-->
In the IE files, you can use #import to import normal.css, and then override the styles as necessary.
First and foremost, I don't wait until the project is done to consider browser compatibility.
Most of the time for CSS issues there are ways to do things that don't require browser-specific stylesheets to be loaded, so I try to use those solutions wherever possible. For example - if most of your issues are related to box model problems, things like using nested divs in place of padding can help to make sure everything looks correct without the need for separate stylesheets and templates for different browsers.
Browser reset to start. Level the playing field as much as possible and do away with browser defaults. Build your CSS from the ground up. (See: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)
Test early and often across all major browsers during development.
Try to accomplish as much as possible without browser specific hacks. Sometimes you'll need to work in some browser-specific CSS but it should validate (use the W3C Validation tool). Sometimes though there's just nothing for it but a conditional (and maybe even some JavaScript), e.g. fix for transparent PNGs in IE6 (See: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/).
If you cannot run IE on one of your development machines, try http://browsershots.org. At least you can get some feedback this way.
Use a debug.css that highlights or outlines divs and other elements. Toss this into your HTML head if needed during development. This can be a huge help.
Use "developer toolbars" where available (IE, Firefox).
EXPECT THAT IE IS GOING TO BE A PAIN, and TEST IN 6, 7 and 8.
Have fun!
Here is how I try to reduce the pain of dealing with IE:
Use a reset.css - Yahoo! YUI Reset or Eric Meyer's Reset CSS
Be careful with floats, clears - they typically cause a lot of cursing.
Be aware of hasLayout bugs in IE, typically adding a zoom: 1 or height attributes helps fix this. Read On Having Layout.
Get the layout working in Firefox, Safari, Chrome, etc while keeping IE about 80% of the way there.
Implement a IE6.css style and an IE7.css style if needed using conditional comments.
Beer, Liquor or other adult beverages.
First, read On Having Layout, which explains how the IE rendering engine works internally. IE's rendering engine is from before CSS. It doesn't properly distinguish between inline and block elements like you'd expect. Instead, in IE an element hasLayout. Or not. This is the source of 99% of IE CSS bugs. So, read that article a couple of times.
As for fixes, I usually use conditional comments. Several reasons:
They are future proof, as opposed to CSS hacks. What if IE9 fixes the hack but not the bug you're using it to solve?
It's valid (X)HTML (conditional comments are just plain comments to everyone else)
It doesn't require javascript. You'd be amazed how many people have javascript turned off.
One remark about conditional comments: Never use an open ended match. That is, never do something like:
<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->
The reason is the same as hacks: make it future proof. What if the next version of IE fixes the bug and you don't need the fixes anymore? Or worse, the "fix" now actually messes up your layout in the new IE version? It's usually best to assume that the next version of IE has fixed the bug that you are working around. I have written a little bit about that back when IE 8 was on the horizon.
I think it would be okay to write a specific css file for IE. I know it is a pain, but because of some possitioning issues, IE6 looks different than all other browswers.
Use this line for your newly created css file:
<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]-->
With IE getting around 65% of the traffic, I don't think you can think of it as an after-thought.
Overall, I try to do as much as I can without making a separate CSS file for IE. I'll use come conditional formatting to target it specifically if needed. Overall though, at most you might need to do an IE only stylesheet to get it to work.
Just be sure that you are testing with the proper versions of IE for your audience, as IE 6, 7, and 8 are quite sommon.
As a last resort, when tweaking the CSS just won't fix things, I like to use Rafael Lima's CSS selector script. While it depends on JavaScript (most sites I build do anyway), it provides a convenient way to tweak CSS for different browsers and versions without separate stylesheets.
You can have :
.someClass {
margin-left:1px
}
.ie6.someclass {
margin-left:2px
}
<script>
if (internetExplorer) {
window.location = "http://getfirefox.com";
}
</script>
Keep the markup as simple as possible. Make small changes. Test every change.
I delete it
I would think that developing a new CSS File for use in IE would be considerably easier then re-writing your application, but I don't know what scale and scope your application has that would even render doing that a considerable option. I guess it can depend on what versions of IE you're looking to support.
We're at a point now that most users should have completely migrated away from IE6. IE7 is still a hassle, but nowhere near as bad as 6 was. With my projects, the default setup I sell is IE7 compatibility with code to direct users of IE6 and below to upgrade. If a client wants me to incorporate IE6 compatibility into a site, I typically increase the quoted price by 50% because of how awful of a headache is is to support the browser and how much extra visual code has to be written to make it work.
I know that this may fall into the 'too little, too late' category. That said, I would investing in VMWare or Parallels and create a Windows VM w/ IE6.
As you are developing, you should incrementally check your progress in the browsers that you care about.
That said, with an existing application, I would first make sure that my HTML was valid (there are a variety of validation services at your disposal) then, depending on the layout, I was section-by-section try to get the layout right, using comments to 'hide' the sections that you are not actively working on.
I usually do everything I can to avoid having to create a separate CSS file. There are a lot of CSS & HTML tricks & tips out there that should allow you to make it work in IE6 & up, as well as every other common browser. It just takes time to figure it all out. Unfortunately, sometimes with complicated layouts it can take a lot of time especially when you don't test it as you go.
I let others solve the problems for me. I use Yahoo's excellent CSS files included in their YUI library. They have one file to remove existing formatting for existing labels (e.g. H1 in IE does not look like H1 in Firefox), they have another to give me a default set of formatting that does look the same across browsers, they have yet another to standardize font sizes, and most important of all of them is their grid file. It gives me the ability to build hierarchical formatting of regions and sub-regions on the page very quickly and easily and I know it will work on any major modern browser (Yahoo tests the heck out of it to make sure it does).
It may not be the perfect solution, but it has been more than sufficient for my needs.
I had the same issue in my dev: IE6, FFetc + LAMP + custom MVC, based on Rasmus Lerdorf's article way back when he suggested noMVC-kind of like handle it using includes for headers, footers and the sort. I coded CSS, got stuck with FF not rendering it nicely. I had to go revise my CSS knowledge - I found that a single CSS implementation can render correctly in std. compliant mode(FF) and IE6. I liked that. I was happy with handling any changes using a single CSS file. My advice:
I know you have a Mac, go garage sale-ing (newspapers will tell you where they are), get an old PC for $10 (so far I've found plenty). This'll give you an opportunity to test out IE6 early, while you're at it get a KVM switch as well to access the machine when you need to.
One of the things I've gotten addicted to is IE6's setting - Disable all ActiveX scripts - makes browsing the web without ads a blast, anyways - test out your app with & without activeX settings, and see how well your site does. This has literally saved me hours of 'painful' moments folks above me have mentioned prior.
You prolly know how to test out FF/Opera/Safari with&without scripting
Finally - regardless of how heavy Javascripting your site uses, make sure without scripting the core features (which I'm sure you have lot's of) load properly.
I'm no expert, but sure hope my comments help you out a bit.
Cheery-O
I make sure my websites work natively and perfectly in ie9 , and work in ie8(possibly with features missing).
I prompt everyone that uses an older version to get chrome frame.
I never waste my time for ie7 and older, because using a 6 year old browser is pathetic, and should not be encouraged.
As nosredna said, use a valid doctype (see http://www.alistapart.com/articles/doctype/)
Then check your web site in the w3c validator (http://validator.w3.org/). If it shows no errors (or just a few), then IE should render it correctly.
I wouldn't put much effort in making it compatible with IE6, and just accept the fact that a website can look different in various browsers.