We have a site that works fine with any latest browser including ie8.
But it has lots of issues with ie6, ie7 and ie8(Compatibility mode).
We are using following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So it is not using quirck mode.
Before i start digging into individual issues, just want to known if i am missing something or doing something wrong to go ie in some different mode other than standard?
I tried to find list of known issues with ie6 and ie7 when using w3c standards but didn't find much useful, but found just enough to confuse me.
Any known site where i can find known issues with old ie's when using w3c standards?
By specifying what type of HTML document you are using at the top of your document you are taking the browser out of quirks mode. Now, the newer browsers are much more standards compliant and therefore easier to code with. Here are some tips that might help you out:
Use DIV instead of TABLE for layout
Watch out for Document Object Model or DOM differences between browsers
Here is a site with CSS compatibility info: http://www.quirksmode.org/css/contents.html
Run your code through W3C's Validator
Instead of W3C's free validator, consider purchasing a HTML validator which you can run on your machine. In my opinion a programmer wouldn't run a C# program without compiling, and web development shouldn't be done without some sort of validation program. It will save you oodles of time.
Sorry I can't post more links. Stack overflow will only allow me to post one.
Here is one link that has a few fixes I used to use: http://hublog.hubmed.org/archives/001515.html
There are more conflicts and non-implementations than one should ever have to know. If you write standards-compliant websites, your websites will not work in IE6 or IE7. Most people special case IE6 and IE7 with special stylesheets to fix the breakage.
The IE6 PNG fix is especially common.
Here's a good overview of IE related CSS bugs.
Also, if you're not doing it already I strongly suggest you use a CSS reset (here's an example of one CSS reset there are others out there e.g. YUI CSS Reset) - bringing all browsers down to the same baseline and then working up will elminate a lot of inconsistencies without having to track them down individual and hunting for causes if they later appear.
To find out whether you are correctly picking up Standards Mode, enter:
javascript:alert(document.compatMode)
in the browser's address bar whilst your page is loaded. If you get ‘CSS1Compat’ you're sorted. If you get ‘BackCompat’, you're in quirks. This can happen in IE when you've put some stray bytes before the <!DOCTYPE declaration, for example a spurious <?xml declaration.
I tried to find list of known issues with ie6 and ie7
It would be quite long. Yes, even in Standards Mode. Anything in particular?
Related
I'm working on a new website, and I want to support as many old browsers and operating systems as possible, as easily as possible. From what I've been reading, I know I'm better off avoiding quirks mode, so I need to decide on the best doctype. And everyone seems to be recommending the HTML5 version:
<!DOCTYPE html>
But according to this website, that also recommends the HTML5 version:
https://hsivonen.fi/doctype/, that doctype will trigger quirks mode in Netscape 6, and maybe in Konqueror 3.2. But this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
won't trigger quirks mode in any browser listed on that website.
So my question is, is there any reason why I shouldn't use the 2nd doctype? I know those are really old browsers I'm concerned about, but I've seen recent statistics saying Netscape 6 is still in use, at least in Russia. And where I live, I still see a lot of people using Windows XP. So while I don't want to spend a lot of time supporting obsolete browsers, I'm wondering if there are any disadvantages to using the 2nd one, other than it's longer and looks complicated.
edit: All the answers and comments posted so far, have been really helpful. Now I'm starting to see that it's a tradeoff between:
1) being semantically correct, and
2) putting more of the very old browsers into standards mode, instead of quirks mode
In most cases #1 is probably more important, since not many people use those really old browsers. And if they do, they're probably used to things looking a little off. But if you're more concerned about things looking better in really old browsers, then #2 could be a better choice.
Anyway, I'll wait a while to see if anyone adds any more answers or comments. Thanks!
edit 2: All 3 answers were helpful. And 2 of them helped me understand specifically what I needed, so I selected one of those. But I would have selected both, if I could have.
The only reason I can think of is that if you want or need to use HTML 5 in the future you'll be able to with more ease already doing everything in HTML 5.
And browsers should have no problem dealing with the fact that it's strict 4.01 and will display it just as if it didn't have the doctype anyways.
Basically from a "what the page looks like" point of view your strict 4.01 will look the same in a html 5 doctype as it will in a strict.
Having said that, it does depend on your HTML there are certain times that you'll need to do it but chances are it shouldn't matter
Really good link for further info on doctype declarations:
http://www.htmlgoodies.com/html5/markup/the-doctype-tag-and-its-effect-on-page-rendering.html#fbid=JCm-bKCUNc6
There are several reasons:
Old browsers(those that doesnt support html5) wont be forever, one day the will be gone but those browsers that can support html5 will take long time in order to be a "old browser". So try to take advantages of all those new html5 feactures.
HTML5 has some new tags that are better for S.E.O
HTML5 Introduced new video codecs that will improve the audio and video experience.
HTML5 introduced a really drag and drop feature!
So what I suggest you is to use html5 and try do your best to make "old browsers" run your html5 website.
I would just use the , but not use any HTML 5 specific features, I think that would work nicely. Older browsers try to render the page as good as they can. In any case, if you DO want to use HTML 5 features, you can always see if they are available in your javascript code or use a framework such as modernizr.
According to me main reason is that :
<!DOCTYPE html>
Html5 : Supports header, footer and section tag. And this tags are easily readable to google for "Search Engine Optimization". So, google takes it as important content on our page.
And for "4.01 strict" :
These header, footer and section tags are not supported.
yes the reply is I'm a very bad css coder but I really need to understand that, I created a page without using any doctype and the things goes whell in IE, FF and Chrome, except one or two very little thing, then I decided to add a doctype to see, but everything is displayed anyhow.
Google doesn't help me...
The page without doctype: http://commenttrouver.com/test/indexwithout.php
And with : http://commenttrouver.com/test/index.php
Thank you
Including (most) Doctypes, triggers Standards mode in browsers.
They stop emulating the bugs that appeared in older versions of browsers and more rigorously apply the standards (such as the requirement to treat a CSS length without a unit as "invalid and to be ignored" instead of "pixels").
Validate your HTML.
Validate your CSS.
Then worry about why anything still broken is broken.
I just made a clean website using HTML4 and CSS. Which worked perfectly fine in Chrome and Firefox. I also checked my site using the W3C CSS validator and fixed all the errors and warnings that were displayed. However, when I checked on IE7. The site was totally misaligned and out of place.
Is there a HTML and CSS validator which also checks for ie7 compatibility?
No, because what you're asking for is not a "validator" but an "invalidator". IE7 has a number of bugs, and lacks implementation of a number of features. There's no way for an "invalidator" to know your intent with anything, and thus, can't tell what you are trying to do.
With your site being a clean html4 and css site, maybe I'm offbase and you've already done this, but just double check that you've included a doctype declaration tag at the beginning of each page. As mentioned above, IE renders in quirks mode without a DOCTYPE specified, and personally i've solved many problems by specifying a doctype in my sites.
The route leads along knowing important CSS concepts and browser characteristics. I think there is no such validation service or tool that points out the hacks necessary. :( But there are some magic bullets against bugs in IE7 (e.g. setting the flag hasLayout=true or position:relative). There is a good collection of bug descriptions and reduction here: http://www.brunildo.org/test/index.html.
I recommend you start using a CSS reset file. This will reset all default css. These default css settings are different for most browsers. If you do not override them manually, you give the browser the control on your layout. And that's not what we want, aren't we?
I suggest you to upgrade you html to some newer version (html5 if possible or) at least xhtml 1.1, I think the problem is that IE7 is working in "quirks mode".
More information about Quirks mode here
I got this page that works OK in Chrome, and it doesn't in IE9.
I tried making a new css for the IE9 page, using a conditional comment in the html code. That's okay.
But then I tried including a doctype statement... and the following happens:
when I include the doctype in the html file, everything is messed up
(even in Chrome) but once I deleted it, the page looks great in
Chrome and IE9.
If I restart IE9 (or remove temporary data) the page doesn't work
again.
I don't really know what's happening.
Any help would be really appreciated.
As has already been said, always use a doctype. Without one, IE renders in quirks mode, and what you get will be very different from what you get in other browsers.
If you code looks bad with a doctype, then I would suggest your code is bad to begin with. You've designed your site to quirksmode, which is going to give you results that seem random (they're not, but it will seem that way).
You're going to have to redesign your site to use standards mode. Then it will look the same (or similar) in all modern browsers.
First, you should always include a doctype. It tells the browser what set of rules you're going to be playing by.
If you omit a doctype, IE will assume your markup is ancient, and trigger Quirks Mode, which is essentially the rendering of IE 5.5. Side effects of this include the IE box model bug.
Without seeing any markup, I strongly recommend validating your markup and CSS using the W3C validators. Often times, Chrome and FireFox are "better" at guessing the meaning of questionable markup, IE not so much.
First of all, it's hard to find a solution without seeing your HTML/CSS. Generally, you shouldn't need a separate CSS file for IE...
Also I suggest you try using the HTML5 Boilerplate to help minimise browser inconsistencies. This should solve most problems unless it's an error in your CSS.
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 :)