overflow-x sometimes works, sometimes it doesn't

having an issue with the horizontal scroll bar working

[MickeyRoush]

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

.single

, I'm using the following to try and show a horizontal scroll bar if the line of code is too long.

.single pre {
 overflow-x:scroll;
}
.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.

[brandozz]

Did you try defining a width on .single pre?

[MickeyRoush]

Yes, I tried defining a width. It didn't help. :(

[swa66]

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.

[MickeyRoush]

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.