Results 1 to 8 of 8

Thread: Firefox scrollbars problem

  1. #1
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Firefox scrollbars problem

    Have managed to cure left right page shift problem for centered layout in firefox by forcing vertical scrollbar using either
    html { overflow: -moz-scrollbars-vertical; }
    or
    html { overflow-y: scroll; }
    in the site's css

    however that's had the side effect of completely disabling the horizontal scroll bar when window size is reduced to narrower than the content (so content becomes inacessible!)

    any idea of fix to get horizontal scrollbar working on auto again?

  2. #2
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

  3. The Following User Says Thank You to JAB Creations For This Useful Post:

    Katy (02-07-2010)

  4. #3
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks - unfortunately I'd already been playing with most of those options with no success....

    found in the end best compromise seems to be
    overflow: auto;
    overflow: -moz-scrollbars-vertical;
    overflow-x: auto;

    in body section not html section
    if I do that in html section firefox was actually providing horizontal scrollbar but at bottom of page not bottom of window - so you had to scroll down to find it on long pages..

    overflow-y: scroll in body section makes ie go wierd with double scroll bar... so will have to use depreciated code that fixes page shift in firefox only, Opera still has page shift issue but I think I've lost the will to live messing about with this....

  5. #4
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    I think an important question I should ask....did you build this in Firefox and then Internet Explorer?

    Because if you built this in IE first then you are seriously on the wrong path here.

    Without looking at your work I can't really visualize what you're doing.

  6. #5
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    latest version is up at
    http://www.equinepainting.co.uk/

    and most associated files except some from commissions etc...

  7. #6
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    I'm not exactly sure what the problem is now that I'm looking at the page in Firefox 3.6 and IE8.

    You definitely have a static width set to the #maincontainer. Do you know how to use liquid layouts with percentage based width? You could easily get the site to work okay at 800x600 without a horizontal scrollbar. You might have to spend a day or two adjusting things if you're not familiar with liquid layouts however you could learn a lot.

    I recommend renaming your current style sheet, making a copy of it, and messing around with it. It doesn't look like you're doing anything "fancy" that would make IE cringe and require conditional comments.

    Also you could easily remove the table elements on the page. It looks like you just need one more bold move to get this page code-wise to where you'll be on the next level so-to-speak in regards to standards.

    Remember, when you do liquid layouts you only want to apply the width (not border, margin, or padding) to the parent-most element (main container parent, content container parent, side container parent) and to add "padding" you want to add margin to child elements of those parents.

    Visually I like the page...oh and remember, always back up your work before you do anything you feel would be drastic.

  8. #7
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    problem was non appearance within window of horizontal scroll bar for deep pages that required it - assigning overflow-x to body instead of html has fixed the issue in IE and FF so you shouldn't now be seeing any problem (hopefully)

    I was staying with static width as otherwise the possible stretched variations are too different to design for successfully.

    I might be interested in redesigning content elements for css rather than table layout but have started to reach beyond my competence level if I can't find something to copy!

  9. #8
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    CSS level 1 is really all you're going to need for your site as far as I can tell off-hand.

    What's your screen's maximum resolution? Test out a 80/20% content / menu width ratio and adjust it as you see fit. If you're careful you could add margins to the parent-most div.

    Code:
    <div id="parent_main">
    <div id="parent_content">
     <p>content</p>
    </div>
    <div id="parent_side">
    <div class="side">
     <p>side</p>
    </div>
    
    <div class="side">
     <p>side</p>
    </div>
    </div>
    </div>
    Code:
    #parent_main
    {
     margin-left: 10%;
     margin-right: 10%;
     width: 80%;
    }
    
    #parent_content
    {
     background-color: #daa;
     float: left;
     width: 80%;
    }
    
    #parent_content div.content
    {
     background-color: #aaa;
     border: #bbb solid 1px;
     margin: 20px;
    }
    
    #parent_side
    {
     background-color: #aad;
     float: left;
     width: 20%;
    }
    
    #parent_side div.side
    {
     background-color: #aaa;
     border: #f00 solid 1px;
     margin: 20px;
    }
    Making sure you understand the box model and how width is determined in CSS1 is critical to getting this to work in all browsers. Until you get to CSS2 IE...even IE4 will handle basic page layouts without bugs. CSS2 adds positioning, overflow, and I think (not sure) negative margins.

    I've added background colors and borders in my demo code.

    Also make sure that you're using a doctype to force the page to render in standards mode.

    IE6 and older will mistakenly render the page in quirks mode if you add the XML declaration for XHTML (you should have but leave out for now since you're testing in IE6 and Firefox).

    It may seem like a lot but you've already got a good looking page.

    I will eventually make a tutorial about all of this stuff but at one point I didn't understand this stuff and after messing with it well...now it's all a piece of cake.

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
  •