htmldog.com and horizontal scrolling

B

Ben C

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>
 
D

dorayme

Ben C said:
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 ...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top