I just opened a webpage in safari and what did I see? The whole text was green? But I only make the captions green, so the regular text should be black? Then I thought: Well I programmed this site in Firefox. At first I thought it was a bad interpretation by Safari but I reviewed my code again and I saw this:
<h3>Caption<h3>
<p>BlacktextblacktextBlacktextblacktextBlacktextblacktext</p>
I haven't closed the h3 tag.
So Safari interpreted my code correctly, and the Firefox tolerated this typo? In Firefox it works as it should: GREEN caption BLACK text; Safari says: "No no! You forgot to close the h3? Well now everything is green, deal with it."
My Question is: How tolerant are the major browsers? What (typos, invalids, etc) do the browser tolerate?
Actually, both browsers "tolerated" your invalid markup (invalid because you had two unclosed <h3> tags), they just did so in different ways. Gecko (Firefox) decided that the h3 can't contain a p and closed them both just before the opening p. WebKit (Safari, Chrome), on the other hand probably closed them at the end of the document body.
All browsers will do their best to recover from the biggest mess of a HTML document. Their "tolerance" level is more or less equal, but the results will vary between them. It's best not to rely on browser error correction. Use the w3c validator to make sure your code is valid and give it the best chance of parsing correctly in all browsers.
Browsers doesn't have any tolerance for errors at all, but they will make their best to correct code that is not correct so that it can be rendered.
While there is well defined standards on how to render correct code, there is no standards at all on how to interpret incorrect code. Any browser may use their own plan on how to make the best out of the situation.
Neither of the browsers can interpret the code right, as the code itself is not right. So, neither of the browsers does anything wrong, they just do things differently.
Related
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 have this particular html code involving a couple of HTML5 features. The layout of the page is exactly what I am expecting on every browser (not tested on Opera) but with the addition of the HTML5 doctype, the "curvy" shape around "buy it" is no longer present, and the orange color that both "buttons" (do it and say it) are supposed to have disappears. Could anyone provide some pointers on how to get the page to look normal on all major CURRENT browsers. I have a fairly technical audience coming to my site, so non HTML 5 compliant browsers will not be an issue.
Original without doctype (You will have to copy/paste into chrome or firefox to see what I mean, sorry!):
http://jsfiddle.net/bRCw3/
With doctype:
http://jsfiddle.net/ZXXYy/
Thank you for any help you give me.
You've specified the orange background colour (FF9900) in two places without a preceding #. Quirks mode is forgiving on this but standards mode is stricter and will ignore it.
Just change background-color:FF9900 to background-color:#FF9900 in both places and you're good.
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.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.