IE 6's height property acts strange
simple problem (hopefully)
I have a div:
using css:
.break {position: relative; height: 1px; background-color: # 555555; margin: 5px 10px 10px 10px;}
This div renders as a 10-20px string in IE 6 ??? ... works fine in any other browser
any advice would be appreciated, thanks ..
Andrew
a source to share
Installation
overflow: hidden;
tobreak should fix the problem.
IE just reserves a minimum amount of space for content (the space reserved is equal to the line size or font size for these elements - I don't remember exactly). In all other browsers, if there is not enough space, the content flows out of the container. IE stretches the container. So setting overflow into a hidden solution to the problem.
a source to share
Without seeing the complete HTML markup, it's hard to know for sure, but it probably has something to do with IE 6 rendering the box model in quirks mode [1]. To force IE 6 to use standards mode, make sure you explicitly declare the doctype at the beginning of your HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
If you are using an XML document type, make sure you DO NOT start with an XML declaration. If you have an XML declaration before the doctype header, IE 6 will drop out in quirks mode. If you are using XML document type your header should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Not this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
a source to share