Menu
I have this simple HTML
<html>
<head>
<style>
</style>
</head>
<body>
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface">
<div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div>
<div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div>
</div>
</body>
</html>
There are basically two divs: one "horizontal" (height 2px) and one "vertical" (height 2px).
When I view the page on firefox:
while on IE (8) something weired happens:
the top DIV is not 2px high.
Any idea why is that so ?
861
Your possible solutions :
1). Add display: block to your style
2). check you have a proper DOCTYPE otherwise (IE) quirks mode will produce unexpected format and results. Check this article for reference
149
Your problem appears to stem from ie's quirks mode mode.
It occurs when there is no doctype declaration. Max height, among other things (including the box model) acts as if it were ie5. A simple solution is to add a doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
