473,231 Members | 1,929 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 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 2772
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

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

Similar topics

21
by: Amy | last post by:
Hello all, Well, I've decided to take the plunge and go for this no table theory... so far I'm not impressed - the whole thing is driving me mad!!!! I'm sure once I finally get it working...
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
8
by: oj | last post by:
Please, bare with me. I'm new to CSS and would like to ask for some advice on my current project. I have an existing table based layout that serves as the main template for a .Net application I've...
3
by: SebiF | last post by:
Hello, It might have been asked before but since I could not find a reference here's my qustion: I want a liquid layout similar to this one:...
6
by: glakk | last post by:
I got on the tableless layout bandwagon early on, and thought it was a really cool way to lay out a page. I don't know why I thought it was so cool, except I guess I fell for the "oh, cool" talk. ...
1
by: Durabo | last post by:
Hi, i must divide the page of my situated Internet in 3 lines and would want to make in way to have a layout liquid (would have to be adapted therefore to whichever dimension of the window). ...
9
by: Eric Lindsay | last post by:
How do you provide a consistent gradient fill as a background in a liquid layout? If I make a gradient fill image say 1000 pixels wide (and repeat it down the page) to suit a typical computer...
15
by: Eric Lindsay | last post by:
I need to include some simple (sparkline style) graphs in a web page that will have a liquid layout. Some viewers will be changing the font size to suit their display (sizes range from 320 to 2560...
1
by: hansBKK | last post by:
Here's a (new?) variation on using negative margins to get a three- column layout - I've used the example HTML from A List Apart's article by Alan Pearce: ...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.