Horizontal scroll issue related to vertical scroll problem when browser window not fully expanded…

[mpsb]

I am trying to design a photography gallery page in HTML and CSS with a relative header wrap div around a fixed header div (and the same for footer) with a main div that scrolls horizontally. I have finally worked all this out just fine, EXCEPT…

When the browser window becomes too small vertically, the div with the horizontal scroll starts to scroll vertically as well, causing an overlap with the header. Is there a simple CSS line of code fix to this please? I guess I’d like to make only the vertical positioning “fixed” while still allowing the horizontal scroll without having to use any other kind of complicated script/language etc.

You can see the page in question “here” and also the CSS file “here”.

My coding skills are minimal I know so no making fun of my CSS!

Thanks a million in advance for any advice…

[Billy]

You can tell it not to scroll vertically (y axis):

.thing {

overflow-y: hidden;

}

[mpsb]

Thanks cyneWATCH but doesn’t seem to solve it. I am likely putting this in the wrong place though. Have tried it in both the CSS file and on the individual pages.

This is my CSS styling for the div I need not to scroll vertically:

#galleryWrap {
width:13000px;
height:514px;
float:left;
margin-left:9px;
}

#indexWrap {
width:1024px;
height:514px;
float:left;
margin-left:9px;
}

Should the hidden y-overflow go in here or somewhere else?

[Senff]

Did you try putting the overflow-y: hidden on the BODY and/or HTML element?

[Billy]

So it’s the body and html that scroll. You should make it this then”

body, html {

overflow-y: hidden;

}

[mpsb]

Thank you… This is close to working but not quite there… In FF 3.6.2 it stops the vertical scroll perfectly as I need but is now throwing in an ugly white horizontal scroll bar. I suppose by increasing the “height” of the footer div I can shoo this away further down the page (as you can’t control the styling of this can you?).

It does not work at all still in Safari 5.1.6 (but at least their horizontal scroll bar is less intrusive!

Can’t test IE until I get to my machine with Parallels on it tomorrow.

Any other ideas? I am searching away and trying various things but no joy this end.

Here is link to updated page.

[Billy]

It works in Firefox and Opera, but it still scrolls in Safari and Chrome. I don’t think it’s too bad though, because otherwise you don’t know to scroll sideways.
You can style the scrollbar in Webkit (Chrome and Safari, Chris made a post on it) and you can use JavaScript to style it in other browsers.

[mpsb]

Thanks for all your help… I have it like this now and am happy in Safari & Chrome with custom scroll bar using Webkit.

Opera and Firefox won’t allow the Webkit to work.

Worse still is that sadly IE won’t show any scrollbar (or footer for that matter).

So I’ll be banging my head against my desk for a while on this final issue no doubt – may just have to pay someone to sort out the js for me for IE/FF custom scroll bars if that’s what you think I need to do. Bit beyond me.

Again, thanks for your assistance.

[Billy]

You can style the IE scrollbar too, but in a different way (mentioned in Chris’ post too), and can probably make it scroll vertically by adding a conditional stylesheet:

(I think that’s how it’s written; it’s called a conditional stylesheet).
This’ll mean that you can tell

html.ie {

overflow: scroll;

}

to override the hidden from before.

And as for using JavaScript to edit others, you can find ready-made scripts that allow you to edit a CSS file I believe.

[Billy]

I think exactly the same as Schmotty on that.

[Author]

Posts