Hi everyone! If you don't know this already, I want to share this very important concept to you about the difference in Box Model as per W3C standards & Internet Explorer. First take a look at the image below:
If you already use a DOCTYPE, then you don't need to worry about this issue. If not, start using DOCTYPE.
<head>
<title>Document Title</title>
</head>
<body>
Document content
</body>
</html>
<title>Document Title</title>
</head>
<body>
Document content
</body>
</html>
What does it mean? It means that when you specify width attribute in css, as per W3C standards, the padding, border & margin should be added to the width of the element.
In internet explorer box model only the margin is added to the widh. The border & padding in IE is shown within the space taken by the specified width.
How to overcome this issue?
Simple! specify a DOCTYPE for your html document. This will force the IE & every other browser to display the page in standards-compliant mode rather than quirks mode.
If you already use a DOCTYPE, then you don't need to worry about this issue. If not, start using DOCTYPE.
Some DOCTYPE which you can use are (there are more, but these are the most relevant as of now ):
DOCTYPE for HTML 5:
<!DOCTYPE html>
Example:
<!DOCTYPE html>
<html><head>
<title>Document Title</title>
</head>
<body>
Document content
</body>
</html>
DOCTYPE for HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Document Title</title>
</head>
<body>
Document content
</body>
</html>
Remember: The DOCTYPE declaration must be the very first thing in your HTML document, before the tag.
More Reading:
No comments:
Post a Comment