and horizontal scrolling

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I notice that the normally well standarded does
not display well in Safari 2 on a Mac. E.g. /

does not wrap properly (as in FF) and needs a fair bit of
horizontal scrolling.


Re: and horizontal scrolling

Quoted text here. Click to load it

They're relying on some rather quirky behaviour of Firefox there. Opera
does the same sort of thing as Konqueror on that page.

The container (div#content) is position: absolute and auto (i.e.
shrink-to-fit) width. The important question here is what is its minimum
content width. In this case the widest unbreakable things in it are
those <pre> elements containing code examples.

Firefox decides that since they are themselves overflow:auto, it can
take the liberty of making them narrower than the minimum widths of
their contents and allow their contents to overflow. So you end up with
horizontal scrollbars on the <pre> elements' boxes rather than on the
whole page if you make the viewport narrow.

The CSS spec says nothing about the value of the overflow property
affecting the minimum content width of an element. MCW is supposed to be
just width with all allowed linebreaks (which in the case of a <pre> is
only explicit linebreaks), and the overflow property is only supposed to
affect what happens when things do overflow, not whether they are
allowed to overflow in the first place.

As for htmldog there's a bit of a bogosity indicator in the selector for
these <pre>s:

    pre {
        width: 50%;
        w\idth /**/:auto;

in a file called "fox.css". Don't know what they're up to but in FF width: auto is parsed and works. In some other version or
browser it probably doesn't and you end up with width: 50%. But why is
this stylesheet called "fox.css" if it isn't specific to Firefox

Try this example in FF and Safari/Opera and you can see what's

            position: absolute;
            left: 16em;
            white-space: pre;
            overflow: auto;
            border: 2px solid blue;


        <div id="one">
            <div id="two">
                lots of text here no breaks lots of text here no breaks lots of
text here no breaks lots of text here no breaks

Re: and horizontal scrolling

Quoted text here. Click to load it

Interesting analysis, strikes me that there would have to be
simpler ways of laying out the pages affected (more pages than I
thought now that I look over the website and all fitting your
remarks about the pre). Perhaps in the preparations of their
<pre>s, they could have ensured a set narrower width to the text?
Stil, in FF it does work nicely. Must remember to (disgracefully
have to) tell people to view this site in FF... <g>


Site Timeline