cssbrowserposterous

Why is 'overflow:auto' CSS not working when using some browsers

I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:

pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }

The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.

Here's the page you can look at to see how well it doesn't work.

I've tested with these browsers:

update:

Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.

Solution

  • If you float .code left then it will work:

    .code {float: left;}
pre { white-space: pre;}