Menu
1)Css styles not applied properly to my HTML page,if i add particular version on html like HTML5,HTML4.1 strict,etc.,If i remove all DOCTYPE statements,it works fine.
My HTML code(Display properly without DOCTYPE):
<html>
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>
My HTML code(background color red not applied with DOCTYPE):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>
Also, i tried instead of HTML5, XHTML 1.0 strict,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
and,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
But not works any one.How to add version properly.
2) Also which is best version now. HTML5 or html4.01 or HTML 4.01 with XHTML?
512
The absence of the DOCTYPE or its incorrect usage will force the browser to switch to quirks mode. It means that the browser will do its best to layout the page that is considered to be old or created against web standards.
Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won't validate without them.
The HTML document type declaration, also known as DOCTYPE , is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.
The doctype is used for two things, by different kinds of software: Web browsers use it to determine which rendering mode they should use (more on rendering modes later). Markup validators look at the doctype to determine which rules they should check the document against (more on that later as well).
Lack of a doctype triggers quirks mode, which is meant only for backwards compatibility for "legacy code" that was created before people started using doctypes. It should pretty much never be used; you should always declare a doctype.
In this day and age, this is all you need:
<!DOCTYPE html>
You can continue to use XHTML syntax with this doctype if you wish. As far as CSS goes, there aren't any differences I'm aware of with different doctypes, as long as you have one. Doctypes will however change which attributes and elements are valid and in which context. Use the W3C Validator to test your HTML.
Unfortunately, this means you will be rewriting much of your CSS to work in standards mode. I know it sounds like a chore, but you'll just have to bite the bullet and rewrite it.
Important note for moving forward: remove the inline CSS and use an external stylesheet instead, otherwise (among other things) you will find maintenance to be a total nightmare.
Of interest: http://hsivonen.iki.fi/doctype/#choosing
Choosing a Doctype
text/html
In a nutshell: Here are simple guidelines for choosing a doctype for a new text/html document:
Standards mode, cutting edge validation
<!DOCTYPE html>This is the right thing to do unless you have a specific reason to avoid it. With this doctype, you can validate new features such as
<video>,<canvas>and ARIA. Please be sure to test your page in the latest versions of the top browsers. Standards mode, legacy validation target<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">This doctype also triggers the standards mode, but lets you stick to legacy validation in case you want to avoid new features or more precise validation of old features. You’d like to use the Standards mode, but you use sliced images in table layouts and don’t want to fix them
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">This gives you the Almost Standards mode. Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode). You willfully want the Quirks mode
No doctype.
Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future—when no one even cares about Windows IE 6 anymore (already no one cares about Netscape 4.x and IE 5). Designing for the Quirks mode is a bad idea. Trust me.
If you still want to support Windows IE 6, it is better to apply specific hacks for it using conditional comments than to regress other browsers into the Quirks mode.
I am not recommending any of the XHTML doctypes, because serving XHTML as text/html is considered harmful. If you choose to use an XHTML doctype anyway, please note that the XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.
87
The problem is that the div is set to 100% of 100% (the body) this makes sence to us but not to the browser. If you set the body position to absolute and set it's top, bottom, left, right to 0, you get the same effect and the div's height setting will work the way you expect. Here's the code.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
