Skip to content Skip to sidebar Skip to footer

Adding Doctype Destroys Layout

I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the

Solution 1:

No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.

Solution 2:

IF you have written your code and css without adding DOCTYPE in you header. It means by default your browser is in quirks mode that means browser dont know how to render the elements. It is always necessary to add doctype in header because some browser like IE will messup your entire layout.

My suggestion is to add doctype transitional and start the code/css, this will be suitable for you and it will always helpful to solve browser compatibility issues.

Here is example by default dream weaver is creating when you create new HTML template.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body></body></html>

Solution 3:

The Document Type Definition defines how certain tags have to be interpreted by the browser. XHTML as a XML-based markup language is very strict and requires you to open and close your tags appropriately (also it is case-sensitive).

Probably your website doesn't follow the strict DTD rules, hence the differences in display.

Solution 4:

As per my comment, I would recommend adding a Strict DTD (as you always should anyway) and code against that. Also, using a CSS reset selector is always a good rule of thumb

*{
   margin: 0;
   padding: 0;
 }

Post a Comment for "Adding Doctype Destroys Layout"