CSS overflows and horizontal scrollbars

Question

I'm trying to build a simple jQuery panel slider on a website (two in fact). I'm not much of an expert when it comes to JS/Javascript, and for some reason I can't remove the horizontal scrollbar on my site.

http://www.visioncreativegroup.com.au/demos/dd/

The slider areas are within the Gallery and Feature Project sections.

I've tried adding overflow: hidden to the slideshow(s) wrapping divs, but it doesn't seem to be working.

Any advice?

:)

I don't think it's the slideshows that are causing the scrollbar to appear - I'd assume if it was all three images from the slideshow would be displayed horizontally and you could scroll through them, but the slideshow seems to work fine. — Michael Peterson
– Michael Peterson, Commented Aug 10, 2012 at 4:48
What do you want? You don't want horizontal scrollbar? or something else? As Michael Peterson mentioned I don't think it's the slideshows that are causing the scrollbar to appear — Ahsan Khurshid
– Ahsan Khurshid, Commented Aug 10, 2012 at 5:02

Diego ZoracKy · Accepted Answer · 2012-08-10 04:49:56Z

2

Add the CSS propertie "overflow-x: hidden" to "BODY". Not for IE8-

This will work, but will be a hack. There is something wrong with your structure to get that horizontal scroll and unfortunatelly i can't check further at this time.

answered Aug 10, 2012 at 4:49

Diego ZoracKy

2,30515 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gaurang171 · Accepted Answer · 2012-08-10 04:52:11Z

1

In your style.css

Replace this code

body {
    font-family: 'Yanone Kaffeesatz';
    font-size: 21px;
    font-weight: 400;
    overflow-x: hidden;
}

answered Aug 10, 2012 at 4:52

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Comments

Vlad · Accepted Answer · 2012-08-10 05:01:01Z

1

Tim, in your style.css there are two strange widths in classes:

#gallery .panels {
    -moz-transition: margin-left 0.8s ease 0s;
    margin-left: 0;
    overflow: hidden;
    width: 4320px;
}

and

#project .panels {
    overflow: hidden;
    width: 2880px;
}

They are causing the scrollbar.

Remove them, or, if you want to keep them, apply the method everyone else suggesting:

overflow-x:hidden to the body

answered Aug 10, 2012 at 5:01

Vlad

2,53022 silver badges34 bronze badges

Comments

Heather Gaye · Accepted Answer · 2012-08-10 05:21:39Z

0

NOT A HACK! I fixed your problem by applying

.wrap {
  position: relative;
}

Invariably applied as standard in pre-rolled grid systems. Turns out that's what it'll take for your browser to pay attention to the overflow: hidden on that element.

edited Aug 10, 2012 at 5:21

answered Aug 10, 2012 at 5:10

Heather Gaye

1,1181 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

CSS overflows and horizontal scrollbars

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related