CODEWITHSUNDEEP
htmlcss
Majid Laissi
Majid Laissi

Reputation: 19778

Setting div max height doesn't work

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:

enter image description here

while on IE (8) something weired happens:

enter image description here

the top DIV is not 2px high.

Any idea why is that so ?

Upvotes: 11

Views: 23805

Answers (6)

Cypher
Cypher

Reputation: 258

Digging up old thread. Now you could add the following.

overflow:hidden;

Upvotes: 0

Yitzhak Weinberg
Yitzhak Weinberg

Reputation: 2562

In my case there was a

min-height

setting that Override the other settings

Upvotes: 1

Tyzoid
Tyzoid

Reputation: 1078

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">

Upvotes: 4

JFK
JFK

Reputation: 41143

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

Upvotes: 5

MicBehrens
MicBehrens

Reputation: 1798

IE7, 8 and 9 works fine here.

You dont really need the max-height, but setting a display: block and/or line-height: 2px instead could be a solution.

Upvotes: 3

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

I suspect this will be IE addding some "helpful" settings in quirks mode that pushes the height of a container to the minimum text height. Try setting line-height: 2px; for IE8 and lower (conditional comments, perhaps?) and that should sort it.

Upvotes: 2

Related Questions