SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Northern Virginia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with 100% min-height with liquid two-column layout

    For reference, this is a dummy of the site with which I need help.

    This is the link to the CSS.

    I am working on a site right now with a hybrid fixed/liquid two-column layout with a header and footer (for a bit of a noob, I am an overachiever ). I've been testing primarily in IE6, IE7, and Firefox.

    My 100% min-height does not work in Firefox, IE6, or IE7. My footer will stick to the bottom of the page if the content extends beyond the viewport, but will not stick to the bottom of the viewport when content doesn't fill the page. Each browser also has one or two of its own idiosyncrasies.

    What It Looks Like In Firefox
    Full-screen.
    800px wide.

    What It Looks Like In IE6
    Full-screen.
    800px wide.
    When viewed at 800px wide resolution, notice the horizontal scroll.
    You also notice that the backgrounds on my #expander and #breaker divs are getting cut off. Yikes.

    What It Looks Like In IE7
    Full-screen.
    800px wide.
    For some reason, the horizontal scroll is longer in IE7 than 6.

    If you are having trouble picturing what I want it to look like, here is a screenshot of when I had it working (but everything else broken haha).

    I've commented out everything to the best of my ability. Any help whatsoever would be unbelievably appreciated. You have no idea how hard I've been working on this!
    Last edited by dlward; Jun 2, 2008 at 09:13. Reason: update

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't nest static inner elements using height:100% because that means the elements won't expand as required. They will only be an initial 100% and will not grow with content. Read the faq on 100% height for a full explanation why this approach cannot work.

    You could possibly try repeating the images on an inner element as well so that they overtake the 100% high outer elements and then take over. You will need ot let the first outer be overflow:visible and in effect the content just spills out. However ie7 could have problems with this and ignore any overflow as though it doesn't exist.

    An alternative approach would be to use an absolute technique that I invented which will let an absolute element keep track of a static element and provide full length columns for your side images.

    The only drawback is that the images will create scrollbars when the page is small. The only reason your page isn't showing scrollbars in Firefox is because you have hidden them altogether. In firefox your horizontal scrollbar is completely missing and you can't scroll to see any content on screens smaller that 760px.

    Here is an example of the column technique in a 100% high environment using your side images.

    http://www.pmob.co.uk/temp/dlward-test.htm

    I don't see how you can avoid the scrollbars where the image is showing when at small screen sizes.

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Northern Virginia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! Everything (seems) to be working pretty well. I appreciate your time and expertise :-)

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Northern Virginia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I spoke too soon...

    Got a list of copy and edits from the client, and have been working on the services.html page. He wants the more exhaustive lists of services to be hidden until the heading is clicked on - got that working, no problem...except in IE6. When the lists are expanded, the background stops repeating past the viewport. It seems to be "remembering" the initial page-height and aligning the backgrounds to the bottom of that even after expanding one (or all) of the lists. I know precious little about JavaScript, and would love to hear any ideas you might have as to how to fix it.

    And apparently I can't post a link directly, so let's do this:

    www . daniward . com / web / services . html

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is a common problem in IE6 with dynamic javascript and 100% elements.

    You can either try to hide the element by using position:absolute; top:-999em instead of the display:none method and this usually works. (It's revealed by setting the element to position:relative and then top to zero.)

    Or you could perhaps more easily tweak the expander element and fool it into being redrawn like this.

    Code:
    <script type="text/javascript">
    function showHide(shID) {
        if (document.getElementById(shID)) {
            if (document.getElementById(shID+'-show').style.display != 'none') {
                        document.getElementById(shID+'-show').style.display = 'none';
                document.getElementById(shID).style.display = 'block';
                         document.getElementById('expander').style.bottom = 1 + 'px';
                        document.getElementById('expander').style.bottom = 0;
            
                    }
            else {
                document.getElementById(shID+'-show').style.display = 'inline';
                document.getElementById(shID).style.display = 'none';
                             document.getElementById('expander').style.bottom = 1 + 'px';
                            document.getElementById('expander').style.bottom = 0;
    
            }
        }
    }
    </script>
    I'm sure one of the Javascript gurus could offer a more elegant solution

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Northern Virginia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See the problem live!
    www . daniward . com / web / distributors . html

    Examples can be found on my photobucket album:
    s43 . photobucket . com / albums / e376 / dannalee487 / hsaError /

    One of those edits I was talking about earlier involved having an exhaustive list of all of the partner-companies and distributors for the client. In this list, they wanted the logo and the name of the company.

    After grappling for a bit with how to display this in a non-obnoxious way, I divided the 200+ companies into ten divs. Originally I had to tried to display them using unordered lists, but kept running into many headaches. I finally settled for a solution used on A List Apart (www . alistapart . com / articles / practicalcss /), and got things to work satisfactorily...so I thought.

    It displays correctly in Firefox and IE7, but in IE6 it seems that my floated divs are throwing things off (as floats are wont to do). But I don't know how to solve it for IE6 without breaking it in real br - I mean, the other browsers :-)

    One thing that's troublesome in both IE6 and IE7 is the inordinate amount of time it takes to load the page. I'm thinking it might be the JavaScript I used to show/hide the divs? Or else the fact that there are 246 logos that it has to load...if you've an idea/solution, that'd be appreciated as well.

    I'd post the code again, but I'm not entirely sure where the problem might be...and the html on that page is a bit hefty.
    Last edited by dlward; Jul 9, 2008 at 11:13.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The answer is pretty simple in that floats will float to the side unless something is in the way.

    In Ie6 the floats are snagging on the edge of a previous float and upsetting the display. The reason they snag is because the heights of the elements are not the same even though you have specified a height.

    The height is actually greater than you have set for some elements and these elements will protrude in IE6 because it treats height as a minimum.

    You should give the elements a height that satisfies all the elements or a better solution would be to set the height and then hide any overflow so that they can't possibly snag.

    e.g.

    Code:
    div.distributors {
        float: left;
        width: 75px;
        margin: 0.4em 0.65em;
        height: 82px;
        border-bottom: 1px dotted #3C3F4D;
        overflow:hidden;
    }
    They will now line up perfectly.

    Regarding the loading time you have 246 images of about 2k each which equates to 500k approx. There is no getting away from the fact that the images take time to load and so the solution is not to load so many images

    Ons solution would be to have ten separate pages so that when you click the next link a new page is loaded and only the images on that page are loaded. if you want all the images loaded in one go then the user will have to wait so it might be worth placing a message saying this.

    Or alternatively display the first set of images as the page loads so the user can see that something is happening and it will appear to be quicker as they will have something to look at while the rest of the images keep loading.


Bookmarks

Posting Permissions

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