homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

overflow-x sometimes works, sometimes it doesn't
having an issue with the horizontal scroll bar working

Msg#: 4625764 posted 9:01 am on Nov 25, 2013 (gmt 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
.single, 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.



Msg#: 4625764 posted 1:10 pm on Nov 25, 2013 (gmt 0)

Did you try defining a width on .single pre?


Msg#: 4625764 posted 11:40 am on Nov 27, 2013 (gmt 0)

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


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

Msg#: 4625764 posted 1:40 pm on Nov 27, 2013 (gmt 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.


Msg#: 4625764 posted 7:39 am on Dec 4, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved