...

View Full Version : Liquid Layout misbehaving in Moz



mindlessLemming
01-15-2004, 07:25 AM
I'm working on my first totally liquid layout but having trouble with a child <div> not causing its parent to stretch vertically in Moz.

I had to add
height:50em;
to the parent just to get it to show at all??

However, buggy ol' IE will except any old crap and displays (this element:( ) as intended.
I've attached the page with all CSS placed in-line for simplicity.

So what's the trick?
I know quite a few of you know.... please share?
;)
Andrew

Mr J
01-15-2004, 04:10 PM
However, buggy ol' IE will except any old crap and displays (this element ) as intended.


Not much of a bug if it works as intended don't you think

:D

liorean
01-15-2004, 04:47 PM
It is because of iew's misinterpretation of overflow. Iew extends the content box instead of rendering the content outside of the box, as it should. Your direct problem is that you are setting a limit on the #content element height, but you are not setting such a limit on the contained elements heights. A liquid design works by eliminating such limits, so that there is always a direction to expand in if necessary.

Alex Vincent
01-16-2004, 12:05 AM
What's a "liquid" layout?

Pardon me for being ignorant; I probably know it as a concept, but never associated it with that title.

Nightfire
01-16-2004, 12:13 AM
It just means a flexible layout. Like these forums, they resize with your browser and make the most of the space :)

http://www.tioka.com/articles/11/

DsgnrsTLZAdmin
01-16-2004, 12:44 AM
Yes, as NightFire said its a "flexible" layout for a page. It goes by percentages for sizes for different things such as frames, images and such as you specify in your code. This way it will automatically resize for different screen resolutions that users may have. This way no matter what the screen resolution you use, everything will be in the same place, with the exception of it being smaller or bigger. Just resizes with the screen so it wont scroll over in your browser.

mindlessLemming
01-16-2004, 01:13 AM
Originally posted by liorean
Your direct problem is that you are setting a limit on the #content element height, but you are not setting such a limit on the contained elements heights. A liquid design works by eliminating such limits, so that there is always a direction to expand in if necessary.

That's how I had it originally, although this caused the parent element not to render at all.
Here's the CSS that's responsible

/*-------------Content Box-------------------*/
#content{
width:50em;
background:#5e0000;
border:0.4em double #ffffcc;
}

/*--------TEXT DIV------------------*/
#textHolder{
float:right;
width:30em;
padding:.6em;
margin:1em;
margin-top:6em;
color:#202020;
background: #202020 url(images/BG_tile.gif);
border:.2em solid #ffffcc;
border-bottom:.2em dotted #ffffcc;
border-top:.2em dotted #ffffcc;
}


CAn anyone see anything wrong here?

liorean
01-16-2004, 01:22 AM
Just put an empty block element at the end of the #content element, and give it clear: both; in the CSS. Floated elements are removed from the flow, which means the parent doesn't consider them content.

mindlessLemming
01-16-2004, 02:00 AM
Thanks for the quick response liorean:D

I worked it out at the same time as you posted, but used a slightly different method; just removed the float from #textHolder and positioned it relatively.

I'm putting in a footer as well, so I s'pose I would have fixed it once that was put in
:o
Thanks again,
Andrew

**edit: My host is back up, so I've got the site up HERE (http://studentwork.qantm.com.au/akrespanis/ReNavigate/home.htm)
.
It's a school assignment that I've thrown together over the last two days.
All the structural elements are pretty much set, but let me know if there's anything that you don't like (for any reason, design/accessibility, semantics..)
Big shout to Patrick Griffiths (http://www.htmldog.com) whose Elastic Layout (http://www.alistapart.com/articles/elastic/) article at a list apart (http://www.alistaprt.com/) inspired this design.
Also thanks to
Douglas Bowman for his ala article: Sliding Doors of CSS (http://www.alistapart.com/articles/slidingdoors/) ,
Dan Cederholm (http://www.simplebits.com) for his article/quiz/thought piece on image floating and captions (http://www.simplebits.com/archives/2004/01/02/simplequiz_part_xi_image_floating.html) . For the record, I used option C:D .

Note: atm this page is designed to display properly in Moz only! I have not yet included the box hacks for IE (don't worry, I'll be kind to Opera;) )

Can someone also give me a clue as to why IE is having such terminal issues rendering the border around the sub-navigation? Really strange stuff.

me'
01-16-2004, 05:55 PM
Just a guess, but why not? Try position: relative on the parent. This seems to solve a lot of phantom mysteries like this one.

mindlessLemming
01-17-2004, 01:54 AM
Thankyou David :thumbsup:
Why didn't I try good ol' position:relative straight away!
Have got a link that explores why so many of IE's little niggles require it?

This is the worst part of designing a page. You've got it all how you want it.....Now to get it the same in bloody IE :mad:

me'
01-17-2004, 10:24 AM
Thankyou David
Why didn't I try good ol' position:relative straight away!It worked? Awesome :D
Have got a link that explores why so many of IE's little niggles require it?Liorean's got a small theory (http://www.codingforums.com/showthread.php?s=&threadid=29139#post150437), but apart from that, no :rolleyes:
This is the worst part of designing a page. You've got it all how you want it.....Now to get it the same in bloody IE Tell me about it!

mindlessLemming
01-17-2004, 11:20 AM
Originally posted by me'
Liorean's got a small theory (http://www.codingforums.com/showthread.php?s=&threadid=29139#post150437), but apart from that, no
I remember that thread, after that I started putting in position:relative on just about everything:o (A practice I've since tried to curb)

Thanks liorean and me' for your help, I'm going to end up oweing you two consultation fees soon:D

It's come along a bit now (http://studentwork.qantm.com.au/akrespanis/ReNavigate/home.htm), but it's still very much Gecko only :rolleyes:.
I just have two nasty .gifs to take care of...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum