Firefox scrollbars problem

[Katy]

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?

[JAB Creations]

This page might be helpful. :)
https://developer.mozilla.org/en/CSS/overflow#Mozilla_Extensions

[Katy]

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....

[JAB Creations]

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.

[Katy]

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

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

[JAB Creations]

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.

[Katy]

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!

[JAB Creations]

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.


<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>


#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. ;)