htmldog.com and horizontal scrolling

Discussion in 'HTML' started by dorayme, Sep 24, 2007.

  1. dorayme

    dorayme Guest

    dorayme, Sep 24, 2007
    #1
    1. Advertising

  2. dorayme

    Ben C Guest

    On 2007-09-23, dorayme <> 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>
     
    Ben C, Sep 27, 2007
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-09-23, dorayme <> 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 ...


    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>

    --
    dorayme
     
    dorayme, Sep 28, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Just D.

    Horizontal Scrolling

    Just D., Feb 14, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    424
    Just D.
    Feb 14, 2005
  2. Just D.

    Disable horizontal scrolling

    Just D., Feb 17, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    2,925
    Just D.
    Feb 17, 2005
  3. ray well

    auto scrolling horizontal scroll bar

    ray well, Apr 4, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    659
    ray well
    Apr 5, 2005
  4. Matt Rapoport
    Replies:
    3
    Views:
    759
    Adrienne
    Oct 8, 2004
  5. Replies:
    0
    Views:
    1,989
Loading...

Share This Page