Opera 7 % div height bug with min-height CSS
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
It's bug time again, we're redoing techpatterns.com, and of course are finding lots of new browser bugs.

What happens in Opera 7 is that when it's given the 99.6% height value, it for some inexplicable reason decides that this means 200%, and so sets the nested div row3-a2 height as about 200% of the container div height. Cute. Opera remains the best handheld browser out there, but unfortunately doesn't seem able to deal with subtle css.

Here's the latest, this is the code, basically:

:: Code ::
html, body {height:100%;}
div#main-container{min-height:100%;}
div#content-body{min-height:100%;}
div#row3-a1, div#row3-c1{min-height:100%;}
div#row3-a2 {min-height:99.6%;}

<div id="maincontainer>
    <div id="header">header stuff</div>
    <div id="content-body">
    <div id="row3-b1">content stuff, set to relative</div>
    <div id="row3-a1">
        <div id="row3-a2">left nav stuff, absolutely positioned to be to
left of content</div>
    </div>
    <div id="row3-c1">right info bar, position absolute, right of
content</div>
</div>
</div>


The problem is solved by getting rid of the 99.6% height and replacing it with 99 or 100% height. Yet another CSS problem straight from the company whose founder is one of the main guys behind the w3c's whole CSS thing.

As usual, Gecko/Mozilla/Firefox do it perfectly, gecko continues to dominate the advanced CSS front. If you haven't switched yet, give it some thought, only problem is you'll have to do a lot of debugging to make your CSS work in IE, Safari, Konqueror, and of course Opera. Oh well, that's life I guess.
Back to top
Display posts from previous:   

All times are GMT - 8 Hours