Unfortunately, before IE6 corrected the problem, Internet Explorer for windows contained bugs which display the box model incorrectly, by placing padding and borders INSIDE the dimensions of the box!!!! Considering how many Windows users still use IE5 and 5.5, web designers must address this problem.
Read about the box model here.
For example ... a box with a height of 100 pixels, border of 5 pixels and padding of 10 pixels (5+10+100+10+5 = 130 pixels in total) remains at 100 pixels high in IE5, and the content (text, images etc) is squeezed into an area 70 pixels high by the incorrectly placed inner padding and border.
A work-around to this problem has been developed by Tantek Celik. Here's what you need to do ...
IE 5 for Windows box model hack
Tantek's hack involves setting an enlarged width value for IE5 (130px in our example). This is then followed by the voice family properties. IE5 cannot read the voice family properties and so continues no further. However, all other browsers continue until they reach the 2nd, and correct, width value (100px in our example) which overrides the IE5 enlarged width value.
#exampleDiv {
padding: 10px;
border: 5px solid
width:130px;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
IE for Mac bugs
Although generally better in its support for CSS than the WIndows version, IE5 for Mac has serious float bugs. Read about them here ... http://www.macedition.com/cb/ie5macbugs/
XML declaration bug
Some web design programmes automatically insert an XML declaration tag when you create a new XHTML compliant document. It may read like this ...
<?xml version="1.0" encoding="ISO-8859-1"?>
Unfortunately some browsers will display a page incorrectly if this tag is included. There are 2 solutions ...
1 Leave it out
2 Use this instead ...
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
Unexplained white gaps
Sometimes, line spaces or "white gaps" in HTML code are rendered as white space by browsers. This shouldn't happen but sometimes it does! The solution is to remove any white line spaces in your HTML code.
Other bugs
Go to www.centricle.com for advice on other browser bugs.
Testing
Test your site for errors by clicking here.