Hi,...simple problem ( I hope)
I have a div:
with css:
.break{position:relative;height:1px;background-color:#555555;margin:5px 10px 10px 10px;}
This div shows up as a line about 10-20px thick in IE 6??? ...works fine in any other browser
any tips would be appreciated,..thanks..
Andrew
setting
overflow: hidden;
to .break should solve the problem.
IE just reserves minimal space for content (the space reserved equals line-height or font-size set for this elements - don't remember exactly). In all other browsers, if there isn't enough space, the content flows out of the container. IE stretches the container. So, setting the overflow to hidden solves the problem.
Without seeing the full HTML markup it's hard to know for sure, but it's likely that this is due to IE 6 rendering the box model in quirks mode [1]. In order to get IE 6 to use standards mode, make sure you are explicitly declaring a 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 doctype, make sure you are NOT starting with an XML declaration. If you have an XML declaration before the doctype header, IE 6 will fall back on quirks mode. If you are using an XML doctype, 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">