471,583 Members | 1,515 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,583 software developers and data experts.

Liquid tableless layout, height difficulties (expand OK, shrink not OK)

Longtime reader, 1st time poster :)

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
  1.     html>body div.inner
  2.     {
  3.     height: auto;
  4.     min-height: 92%;
  5.     }
(something like this)
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
Sep 26 '07 #1
4 2597
drhowarddrfine
7,435 Expert 4TB
I think you may be giving too much wiggle to the waggle. Just to start things off, use this for your css and let me know if that's a proper start.
Expand|Select|Wrap|Line Numbers
  1.     body {
  2.     height: 96%;
  3.     }
  4.  
  5.     body { background-color: lightGrey;}
  6.  
  7.     div.inner {
  8.     width: 92%;
  9.     height: 92%;
  10.     padding: 0px;
  11.     margin: 4%;
  12.     margin-bottom: 0px;
  13.     background-color: white;    
  14.     }
  15.  
  16.     div.north {
  17.     background-color: blue;
  18.     color: white;
  19.     }
  20.  
  21.     div.rowA {
  22.         background-color: #ffeeee;
  23.  
  24.     }
  25.  
  26.     div.rowB {
  27.         background-color: #eeffee;
  28.     }
  29.  
  30.     div.rowC {font-size:1em;
  31.         background-color: #eeeeff;
  32.     }
Sep 26 '07 #2
I think you may be giving too much wiggle to the waggle. Just to start things off, use this for your css and let me know if that's a proper start.
Thanks for the prompt reply!

I did try this CSS, and it seems like without

Expand|Select|Wrap|Line Numbers
  1. html {height: 100%;}
Every other height (div class inner and below) is with respect to auto (since I think HTML is the topmost reference element in the cascade in standards mode)

So the CSS you wrote makes my page render essentially the same as my code but with the IE7/mozilla "hack" for height auto:

Expand|Select|Wrap|Line Numbers
  1.       html>body div.inner
  2.           {
  3.           height: auto;
  4.           min-height: 92%;
  5.           }
I am still doubtful that what I am trying for is possible without javascript, so I think I will try a modified version of this post in that forum too.

Thanks again
Sep 27 '07 #3
drhowarddrfine
7,435 Expert 4TB
I have never seen anyone ever try to hack Firefox to work like IE6. It's always the other way around. I'm not aware of the hack you show.

Many people do what you are wanting to do, without javascript, but I profess that I may still not understand the problem. Like I said, you have too many things sliding around independent of each other and I think that is the issue.

You have to be careful trying to make modern browsers work like IE. It's like saying your 1998 Ford isn't acting like your 2007 Porsche so you start tinkering with the Porsche.
Sep 27 '07 #4
I have never seen anyone ever try to hack Firefox to work like IE6. It's always the other way around. I'm not aware of the hack you show.
...
You have to be careful trying to make modern browsers work like IE. It's like saying your 1998 Ford isn't acting like your 2007 Porsche so you start tinkering with the Porsche.
I do understand it seems like I am trying to conform to an IE6 behavior but this is really just a way of expressing the behavior I want. It is just a coincidence that IE6 does this natively, it's not that I want my other browser to actually "be like IE6" and sorry for the comparison/confusion it causes. All browser implementations aside I really just want an expandable/liquid layout specifically w/respect to height, but I also don't want my contents to spill out of their containers when the window gets too small. This was dead-easy w/quirks mode, but I have yet to reproduce this under standards mode.

The hack is really just using the > character to direct the style which is not implemented by IE until IE7, which under standards mode is very close to firefox behavior in my situation. So, IE6 does not read that style and doesnt make the height: auto or spec a min-height which it doesnt understand anyway

Like I said, you have too many things sliding around independent of each other and I think that is the issue.
I have really made an effort to simplify this page as much as possible and I am pretty sure that the heights are defined w/respect to each other, going up the document hierarchy so I don't think they are really independent (but maybe I am misunderstanding you here). Again thanks for looking into it and maybe if you have an example of where you've seen what I'm trying to do being accomplished, you could show me?

Thx again
Sep 27 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

21 posts views Thread by Amy | last post: by
47 posts views Thread by Neal | last post: by
8 posts views Thread by oj | last post: by
6 posts views Thread by glakk | last post: by
1 post views Thread by Durabo | last post: by
9 posts views Thread by Eric Lindsay | last post: by
15 posts views Thread by Eric Lindsay | last post: by
1 post views Thread by hansBKK | last post: by
reply views Thread by lumer26 | last post: by
1 post views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.