|
Posted by Ben C on 09/27/07 22:00
On 2007-09-23, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> I notice that the normally well standarded www.htmldog.com does
> not display well in Safari 2 on a Mac. E.g.
>
> http://www.htmldog.com/guides/htmlbeginner/lists/
>
> does not wrap properly (as in FF) and needs a fair bit of
> horizontal scrolling.
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
2.0.0.7 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
anyway?
Try this example in FF and Safari/Opera and you can see what's
happening:
#one
{
position: absolute;
left: 16em;
}
#two
{
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
</div>
</div>
[Back to original message]
|