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.
Related
We have some contractors working on a mobile project and they kept insisting that we had to use the HTML5 doctype to use any HTML5 features, like the doctype was a great big boolean switch. I had to keep telling them that doctype really didn't matter that much. You could use HTML5 input types and touch events on an application/xhtml+xml page with a XHTML 1.1 Strict doctype, and the browser could care less. Likewise, you could use the <center> tag with the HTML5 doctype and the text will be centered.
Obviously there are caveats about lower versions of IE going into quirks mode, but that's not an issue in our scope. I personally didn't care what doctype they used but was bothered by their complete lack of understanding on this. At least, until I saw the jQuery Mobile page setup documentation:
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
Are there any features of HTML5 that require the new doctype? This documentation is just wrong, right?
Browsers do not do anything magic with the <!DOCTYPE html> beyond putting the page into standards mode, and so it is equivalent to any other doctype that does the same thing.
However, it is a testable object in JavaScript, so it is conceivable that a piece of JS could do something stupid like switch its behaviour depending on the presence or not of a given doctype. Without going through the code line by line it's impossible to know whether the statement in the jQuery Mobile page setup documentation is specifically true, or just general advice that if followed will result in the desired outcome.
As far as the common Web browsers running on desktops and laptops are concerned: The browser doesn't care very much about the doctype - it will use new features even if your doctype says they aren't allowed. The doctype is really for the validator; your page won't validate unless the features you're using are allowed by the doctype you're using.
I can't actually speak for mobile devices, since I have next to no experience with them, but it seems like they would work similarly, since they're using the same browser rendering engines and attempting to access the same Internet.
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 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.
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?