IE Wierdness: Box Model problem in Windows Internet Explorer (IE)
Problem addressed
The handling of borders and margins in Windows Internet Explorer (IE), known as the Box Model Problem
Solution
This problem has been fixed for Windows IE 7.0
- Include
<?xml version="1.0" encoding="UTF-8"?>as the first line in your documents. This is recommended by the W3C and will force IE 6 in to
quirksmode, so that it will behave the same way as previous versions of IE (reducing the amount of work you need to do). - Create a stylesheet for IE 4.x to 6.x browsers modifing the width and height of boxes to include the width of margins and borders.
- Use my browser specific stylesheets method to target the quirky stylesheets to the supported browsers.
What is Quirks Mode?
Holly Bergevin and John Gallant have written an excellent article explaining Doctypes, Standards, and Quirks mode
Background
This one drove me crazy when I was first learning CSS.
WIN IE 4.x, 5.x and 6.x in quirksmode
places borders and margins on the inside of an elements "box", where "Standard"
browsers (basically everything else) place them on the outside.
So an element set to 100px wide with a margin, and border stays 100px wide with the margin and borders placed inside the box.
Everything else gets a width of: 100px + margin width * 2 + border width *2.
Same goes for height. You can see the problem.
I decided to use conditional comments in my browser specific stylesheets method instead of
relying on css hacks to minimize future compatibility issues.
Creating XHTML complient downlevel-revealed conditional comments
Problem addressed
Downlevel-revealed conditional comments do not validate
Solution
Wrap the downlevel-revealed tags (visible to non-WIN IE browsers) in downlevel-hidden start and end tags (treated as comments by non-WIN IE browsers) to hide them from validators
<!--[if IE]><![if !IE]><![endif]--> Hidden from IE <!--[if IE]><![endif]><![endif]-->
Treated the same in IE as:
<![if !IE]> Hidden from IE <![endif]>
Background
Supported by WIN IE 5.x +,
I mainly use this to target code/css to specific versions of WIN IE.
I currently use
downlevel-hidden conditional comments
for my browser specific style sheets.
I prefer conditional comments to the popular but
problematic css hack filters that
rely on browser bugs that may or may not get fixed.
Fixed Positioning in IE
Problem addressed
Fixed positioning is not supported in WIN IE
Solution
This has been fixed in IE 7, so this solution is only necessary if you need/wish to support older versions of WIN IE.
CSS
/* turn off scrolling for the body of the document */
html, body {overflow:hidden;height:100%;}
/* create a document box to allow the
fixed positioning of the layers, you don't have
to follow my naming convention */
div##sltDocument{position:absolute;
top:0px;left:0px;
height:100%;width:100%;
overflow:auto;z-index:1;}
/* create the fixed layer that will sit
on top of or underneath the document box */
div##sltFixed{position:absolute;
top:0px;left:0px;
height:40px;width:50px;z-index:2;}
HTML
<body>
<sltDocument>
Content and non-fixed portion of the layout goes here.
</sltDocument>
<sltFixed>
This layer will stay "fixed" in place.
</sltFixed>
</body>
Known Issues
The "fixed" layer will cover your pages scroll bars, if you align it right, or width 100%.
Background
There are five values for positioning using CSS2:
position:inherit, position:static,
position:relative, position:absolute, and position:fixed.
Unfortunately IE 6.x does not support position:fixed,
in fact WIN IE 5.0 will choke if you use position:fixed in a style sheet it can read.
But there is a way to emulate the effect of position:fixed using WIN IE proprietary features inside a
WIN IE specific style sheet:
Display of unformatted html in Internet Explorer
Problem addressed
Flash of unformated content when WIN IE is loading a page
Solution
-
Use
<link href="..." rel="stylesheet" type="text/css" />instead of
@importin theheadof your document.
Using@importwithin an external stylesheet
to import additional stylesheets does not seem to cause any problems. -
The existence of a
<script>element (empty will do) inside of the document's
headwill prevent the flash of unstyled content.
I prefer the first option with the additional use of IE conditional comments to prevent the flash,
and to provide a browser specific stylesheet for WIN IE 5+.
Background
WIN IE has an annoying bug that causes the browser to start displaying a document before it has finished
loading all the applicable CSS, causing the page to start being displayed, before it has been formatted.
But there are a few simple ways to stop that flashed display of unformatted content.