6
I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on pop-up webpages which used to be liquid and proportionally resizable (including input fields on them), something I have found to be tough to reproduce without tables and quirksmode.
My current layout (below) actually behaves the way I'd like it to in IE6 (I do understand this isnt the proper implementation of standards mode, but it is the behavior I would like to emulate). As the webpage expands, each section expands in proportion (with a height in %), but if the popup is shrunk too small, the divs will start basing their heights off of their content instead of the height % I spec in CSS, and a scrollbar will show on the right of the page.
IE7 and Firefox expand the way I'd like, don't shrink so gracefully (instead, content spills out of its containing div). I am aware of the hack that will make IE7 and FF behave like IE6 in this regard:
Expand|Select|Wrap|Line Numbers
- html>body div.inner
- {
- height: auto;
- min-height: 92%;
- }
Which works great when shrunk, but then that kills the expanding behavior I was going for. With that height: auto, I can no longer proportionally expand (the % heights become meaningless since they are a % of auto).
I have a feeling I am asking for too much here, and will probably require some javascript to augment it. I have the framework for a switch that runs on load and resize, that will set the height to auto if the content overflows out of the div, or back to the right % if it does not, but I am not sure what DOM properties would best show that (I have tried firstChild.offsetHeight of the div I am testing, but that seems improper). Also I apologize as that's probably a question for the javascript forum.
Aaanyway this is getting quite long, so here is my code (please excuse transitional doctype as this is a big application and we'll need to support some deprecated things for a while)
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>liquid popup</title>
<style type="text/css">
html, body {
height: 96%;
}
body { background-color: lightGrey;}
div.inner {
width: 92%;
height: 92%;
padding: 0px;
margin: 4%;
margin-bottom: 0px;
background-color: white;
}
div.north {
background-color: blue;
width: 100%;
height: auto;
color: white;
}
div.rowA {
background-color: #ffeeee;
height: 30%;
}
div.rowB {
background-color: #eeffee;
height: 50%;
}
div.rowC {
background-color: #eeeeff;
height: 10%;
}
</style>
</head>
<body>
<div class="inner">
<div class="north">
Title and icons
</div>
<div class="rowA">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
<div class="rowB">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
<div class="rowC">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
</div>
</body>
</html>[/HTML]
Any help would be GREATLY appreciated! Also, I was hoping there would be a very generic solution, since these heights I chose are arbitrary. I may need a 3-row popup or a 2-row or just a single one.
Thx again
