Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

overflow-x sometimes works, sometimes it doesn't

having an issue with the horizontal scroll bar working

9:01 am on Nov 25, 2013 (gmt 0)

Junior Member

joined:May 3, 2011
votes: 0

I'm currently working on a WordPress site (it's currently in development, can't share a link at the moment). I'm putting code, like htaccess rules in a Post for my Blog. I'm wrapping the code with:

<pre><code>some htaccess rules here</code></pre>

This is so that it appears in it's own box. Since the class for Posts is
, I'm using the following to try and show a horizontal scroll bar if the line of code is too long.

.single pre {
.single pre code {
white-space: pre;

In the latest version of Chrome, just the blank bar appears with no scrollable bar. In the latest version of Firefox, sometimes the scrollable bar appears and other times, just the blank bar appears and no scrollable bar like it does in Chrome.

Not sure what I'm doing wrong.

Thanks for any advice in advance.
1:10 pm on Nov 25, 2013 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0

Did you try defining a width on .single pre?
11:40 am on Nov 27, 2013 (gmt 0)

Junior Member

joined:May 3, 2011
votes: 0

Yes, I tried defining a width. It didn't help. :(
1:40 pm on Nov 27, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

When you say sometimes ...
Do you mean the same machine with the same browser of the same version, with the same settings sometimes not doing the same thing than other times on the same source ?

Or do you mean that different versions/different clients/different settings cause this ?

If the latter: yes that's normal.
e.g. my mac is set not to show scrollbars at all until I scroll. Browsers like chrome will obey that setting and not show scrollbars till they are needed.
Similarly overflow-x is a CSS3 property and those have been handled like the proverbial stepchild over at Microsoft over years. So anything but the more recent versions of IE will not honor those settings.
What you can do in this case is to allow a fallback onto overflow:scroll for those browsers.

CSS3 defines overflow to be a shorthand notation for overflow-x and overflow-y, so that makes it easy to handle for browsers that do not support overflow-x and overflow-y:

#target {
overflow: scroll; /* for CSS3 lacking browsers */
overflow: scroll hidden;

Ref: http://www.w3.org/TR/css3-box/#overflow1
Note that "auto" is User Agent (UA) dependent: you simply don't know how the client will react.
7:39 am on Dec 4, 2013 (gmt 0)

Junior Member

joined:May 3, 2011
votes: 0

Sorry for replying so late. In Firefox it may appear, than if I refresh the browser it will disappear. Then if I refresh it again it will reappear.