Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Liquid Layout misbehaving in Moz - Page now On-line!

    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
    Attached Files Attached Files
    Last edited by mindlessLemming; 01-16-2004 at 05:26 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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


  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,460
    Thanks
    1
    Thanked 23 Times in 21 Posts
    What's a "liquid" layout?

    Pardon me for being ignorant; I probably know it as a concept, but never associated it with that title.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #5
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    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/

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Location
    Georgia
    Posts
    306
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by DsgnrsTLZAdmin; 01-15-2004 at 11:46 PM.
    ~Designer's Toolz~

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    /*-------------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?

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick response liorean

    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

    Thanks again,
    Andrew

    **edit: My host is back up, so I've got the site up HERE
    .
    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 whose Elastic Layout article at a list apart inspired this design.
    Also thanks to
    Douglas Bowman for his ala article: Sliding Doors of CSS ,
    Dan Cederholm for his article/quiz/thought piece on image floating and captions . For the record, I used option C .

    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.
    Last edited by mindlessLemming; 01-16-2004 at 03:11 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just a guess, but why not? Try position: relative on the parent. This seems to solve a lot of phantom mysteries like this one.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou David
    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

    I take no responsibility for the above nonsense.


    Left Justified

  • #12
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou David
    Why didn't I try good ol' position:relative straight away!
    It worked? Awesome
    Have got a link that explores why so many of IE's little niggles require it?
    Liorean's got a small theory, but apart from that, no
    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!
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #13
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by me'
    Liorean's got a small theory, but apart from that, no
    I remember that thread, after that I started putting in position:relative on just about everything (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

    It's come along a bit now, but it's still very much Gecko only .
    I just have two nasty .gifs to take care of...

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •