Any Idea for IE and Opera - Its working with Firefox ...

Discussion in 'HTML' started by Knut Krueger, Feb 27, 2008.

  1. Knut Krueger

    Knut Krueger Guest

    Hi to all,
    http://www.briefwexl.at/index.php
    The short examples are left of the head with firefox.
    With IE and opera they do not start under "Personen" but at the fist
    place where the head is as small that the images have enough place.

    To use a background for the H1 text for the pictures is a little tricky,
    but the images are displayed like overflow hidden at the right boarder
    (to the head).

    First question?
    does anybody understand what I would like to get ;-)

    second question?
    if yes any Idea to solve the problem without more space for the images?

    Regards Knut
     
    Knut Krueger, Feb 27, 2008
    #1
    1. Advertising

  2. Knut Krueger

    Els Guest

    Knut Krueger wrote:

    > http://www.briefwexl.at/index.php
    > The short examples are left of the head with firefox.


    Yup, that's what I see.

    > With IE and opera they do not start under "Personen" but at the fist
    > place where the head is as small that the images have enough place.


    Yup, that's what I see in IE7.

    > To use a background for the H1 text for the pictures is a little tricky,
    > but the images are displayed like overflow hidden at the right boarder
    > (to the head).


    Now you lost me...

    > First question?
    > does anybody understand what I would like to get ;-)


    It would help if you would say which is the desired end result - what
    Firefox does, or what IE does? (Guessing Firefox)

    > second question?
    > if yes any Idea to solve the problem without more space for the images?


    I would not have the 'head' as a series of floated images. I'd make it
    one background image, and then make the combination of head and texts
    a fixed width div and float the texts left inside of it.

    Disadvantage could be that the text will cover the tip of the nose of
    the man, but if you want to avoid that, you have only one option: make
    sure there is enough space. Or do you really want the head to go over
    the texts, like it does now in Firefox?

    I have no idea what the rest of your page is gonna be like, but
    currently, in Firefox, if you make the window narrower, the texts
    disappear off the left side of the canvas...


    --
    Els http://locusmeus.com/
     
    Els, Feb 27, 2008
    #2
    1. Advertising

  3. Knut Krueger wrote:

    > Hi to all,
    > http://www.briefwexl.at/index.php
    > The short examples are left of the head with firefox.
    > With IE and opera they do not start under "Personen" but at the fist
    > place where the head is as small that the images have enough place.


    Possibly because you have a *comment* above the doctype. Known to fark
    up Internet Exploder. Then you have an *incomplete* doctype in use.

    See: http://www.w3.org/QA/2002/04/valid-dtd-list.html

    and select HTML 4.01 Strict. Transitional is for legacy pages, not new
    ones.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    --
    -bts
    -Friends don't let friends drive Vista
     
    Beauregard T. Shagnasty, Feb 27, 2008
    #3
  4. Knut Krueger

    Knut Krueger Guest

    Els schrieb:
    > Knut Krueger wrote:
    >
    >> http://www.briefwexl.at/index.php
    >> The short examples are left of the head with firefox.

    >
    > Yup, that's what I see.
    >
    >> With IE and opera they do not start under "Personen" but at the fist
    >> place where the head is as small that the images have enough place.

    >
    > Yup, that's what I see in IE7.
    >
    >> To use a background for the H1 text for the pictures is a little tricky,
    >> but the images are displayed like overflow hidden at the right boarder
    >> (to the head).

    >
    > Now you lost me...
    >
    >> First question?
    >> does anybody understand what I would like to get ;-)

    >
    > It would help if you would say which is the desired end result - what
    > Firefox does, or what IE does? (Guessing Firefox)


    Yes firefox
    >
    >> second question?
    >> if yes any Idea to solve the problem without more space for the images?

    >
    > I would not have the 'head' as a series of floated images. I'd make it
    > one background image, and then make the combination of head and texts
    > a fixed width div and float the texts left inside of it.


    But then there is a small place for all images not only for those near
    the nose. And I would like to use the place for a floating text from
    other pages.
    >
    > Disadvantage could be that the text will cover the tip of the nose of
    > the man, but if you want to avoid that, you have only one option: make
    > sure there is enough space. Or do you really want the head to go over
    > the texts, like it does now in Firefox?


    No, the text comes from a Database and will be changed at every reload,
    build with gd library with php. So I will choose a short texts or and a
    smaller font from the database for the nose in the future.


    >
    > I have no idea what the rest of your page is gonna be like, but
    > currently, in Firefox, if you make the window narrower, the texts
    > disappear off the left side of the canvas...


    The suggestion from the illustrator:
    (it is only a static image)
    http://localhost/briefwexl


    Knut
     
    Knut Krueger, Feb 27, 2008
    #4
  5. Knut Krueger wrote:

    > The suggestion from the illustrator:
    > (it is only a static image)
    > http://localhost/briefwexl


    "localhost" it *your* computer, the one you are most likely sitting in
    front of. We will not be able access this URL.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 27, 2008
    #5
  6. Knut Krueger

    Els Guest

    Knut Krueger wrote:

    >>> if yes any Idea to solve the problem without more space for the images?

    >>
    >> I would not have the 'head' as a series of floated images. I'd make it
    >> one background image, and then make the combination of head and texts
    >> a fixed width div and float the texts left inside of it.

    >
    > But then there is a small place for all images not only for those near
    > the nose. And I would like to use the place for a floating text from
    > other pages.


    No, I did not say "fixed width as wide as it has room to the left of
    the nose" :)

    Fixed width div, as wide as you need for the face *and* the texts.
    Then use the face as a background image to that div, and float the
    texts left inside the same div. If you have the texts too wide then,
    they will fall in front of the nose.

    > No, the text comes from a Database and will be changed at every reload,
    > build with gd library with php. So I will choose a short texts or and a
    > smaller font from the database for the nose in the future.


    Sounds complicated.

    > The suggestion from the illustrator:
    > (it is only a static image)
    > http://localhost/briefwexl


    As Jonathan said - we can't see that from here.

    --
    Els http://locusmeus.com/
     
    Els, Feb 27, 2008
    #6
  7. Knut Krueger

    Knut Krueger Guest

    Els schrieb:
    >
    > Sounds complicated.

    but comlicated things are interesting :)
    >
    >> The suggestion from the illustrator:
    >> (it is only a static image)
    >> http://localhost/briefwexl


    ..... http://www.briefwexl.at .....



    not the first time that I posted localhost ....

    I will try to remember next time


    Knut.
     
    Knut Krueger, Feb 27, 2008
    #7
  8. Knut Krueger

    GTalbot Guest

    On 27 fév, 08:17, Knut Krueger <> wrote:
    > Hi to all,


    http://www.briefwexl.at/index.php

    > The short examples are left of the head with firefox.
    > With IE and opera they do not start under "Personen" but at the fist
    > place where the head is as small that the images have enough place.
    >
    > To use a background for the H1 text for the pictures is a little tricky,
    > but the images are displayed like overflow hidden at the right boarder
    > (to the head).
    >
    > First question?
    > does anybody understand what I would like to get ;-)
    >


    Yes I do.

    > second question?
    > if yes any Idea to solve the problem without more space for the images?
    >


    Yes I have.

    First, understand that your design is over-constrained. You over-code
    somewhat to control pixel-precise layout.

    Second, it is always best to use default values instead of declaring
    them.

    .briefwexl {
    display: block;
    ...
    }

    and

    #text1 h1 {
    background: transparent url(../png1.png) no-repeat top left;
    display: block;
    ...
    }

    Here, you can safely remove display: block; from both css rules since
    <div> and <h1> elements are block-level elements: that's by
    definition.

    3rd:
    Use inheritance and inherited properties instead of redeclaring and
    redefining CSS declarations over and over.

    color and font-family are good examples of inheritable properties.
    Just declare once on the body element and then you have no need to
    repeat it later. In other words

    h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
    font-family:Arial,sans-serif,tahoma,Myriad,Optima; }

    h4 { font-size:100%; font-weight:normal; color:black;}
    h5 { font-size:90%; font-weight:bold; color:black;}

    can be replaced (and better, correctly replaced) entirely with

    body
    {
    background-color: rgb(254, 213, 1);
    color: black;
    font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
    margin-right: 0;
    }

    Writing Efficient CSS
    Rely on Inheritance
    http://developer.mozilla.org/en/docs/Writing_Efficient_CSS#Rely_on_inheritance.21

    4th:
    When you try to debug a webpage, one strategy is to surround each
    major blocks with a border so that you can see what may be happening
    in the rendering. Here, the .kopf block is too narrow to be holding
    the images of the face and the 5 empty <h1> <span>s on its left (with
    the pngX.png background images): you have an over-constrained layout,
    not enough space... So, the 5 #textN h1 are pushed below in IE 7. I
    wouldn't say this is a bug... but just that IE 7 float model is more
    sensitive to constraints, pixel-precise layouts.

    Solution:
    just give your .kopf block a width of 40em instead of 35em.

    .kopf
    {
    border: 2px solid blue;
    clear: right;
    float: right;
    margin: 0em 0em 0em 1em;
    width: 40em;
    }

    Another solution (strange) is to avoid, to remove

    div {font-size: 92%;}

    Anything under font-size: 100%;
    is suspicious and is to be avoided except for fine-print.
    Understand that now several browsers (Firefox 1+, Opera 8+, Safari 3,
    K-meleon, Konqueror 3+, Icab 3+, Hv3 TKHTML alpha 16, etc) all offer
    the users to set a minimum font-size for the rendering of webpage. So,
    setting under 100% might not be rendered in the users' browsers.

    Truth or consequences in web design:
    Font-Size (excellent reading):
    http://pages.prodigy.net/chris_beall/TC/Font size.html

    "1em (or 100%) is equivalent to setting the font size to the user's
    preference. Use this as a basis for your font sizes, and avoid setting
    a smaller base font size.
    Avoid sizes in em smaller than 1em for text body, except maybe for
    copyright statements or other kinds of 'fine print.'"
    W3C Quality Assurance tip for webmasters:
    Care Font Size
    http://www.w3.org/QA/Tips/font-size


    "For this year's list of worst design mistakes, (...) I asked readers
    of my newsletter to nominate the usability problems they found the
    most irritating. (...)
    1. Legibility Problems
    Bad fonts won the vote by a landslide, getting almost twice as many
    votes as the #2 mistake. About two-thirds of the voters complained
    about small font sizes or frozen font sizes;"
    Top Ten Web Design Mistakes of 2005: 1. Legibility Problems
    http://www.useit.com/alertbox/designmistakes.html

    Regards, Gérard
     
    GTalbot, Feb 28, 2008
    #8
  9. Knut Krueger

    GTalbot Guest

    On 28 fév, 18:42, GTalbot <> wrote:


    > http://www.briefwexl.at/index.php



    An even more compact, simplified, clarified, more optimized solution
    is to replace all this:

    #text1 h1
    {
    background: transparent url("png1.png") no-repeat top left;
    }

    #text2 h1
    {
    background: transparent url("png2.png") no-repeat top left;
    }

    #text3 h1
    {
    background: transparent url("png3.png") no-repeat top left;
    }

    #text4 h1
    {
    background: transparent url("png4.png") no-repeat top left;
    }

    #text5 h1
    {
    background: transparent url("png5.png") no-repeat top left;
    }

    <div id="text1"> <h1><span> </span></h1></div>

    <div id="text2"> <h1><span> </span></h1></div>

    <div id="text3"> <h1><span> </span></h1></div>

    <div id="text4"> <h1><span> </span></h1></div>



    with this:


    <div id="text1"><img src="png1.png" alt=""></div>

    <div id="text2"><img src="png2.png" alt=""></div>

    <div id="text3"><img src="png3.png" alt=""></div>

    <div id="text4"><img src="png4.png" alt=""></div>

    I tested it with Firefox 2.0.0.12, Opera 9.26, Safari 3.0.4, IE 7 and
    everything was laid out correctly, accordingly.

    See for yourself:

    http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl.html

    http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl2.html

    Regards, Gérard
    --
    Internet Explorer 7 bugs
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
     
    GTalbot, Feb 29, 2008
    #9
  10. Knut Krueger

    Knut Krueger Guest

    GTalbot schrieb:
    > On 28 fév, 18:42,
    > See for yourself:
    >
    > http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl.html
    >


    Just a question:

    Why is the border yround the body in IE complete earound the body and in
    Mozilla only around the text "Hauptfenster -- TestText --" if I change
    in your example:
    body
    {
    background-color: rgb(254, 213, 1);
    font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
    margin-right: 0;
    }

    to
    body
    {
    background-color: rgb(254, 213, 1);
    font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
    margin-right: 0;
    border: 2px solid black;
    }

    Regards Knut
     
    Knut Krueger, Mar 10, 2008
    #10
  11. Knut Krueger

    Ben C Guest

    On 2008-03-10, Knut Krueger <> wrote:
    > GTalbot schrieb:
    >> On 28 fév, 18:42,
    >> See for yourself:
    >>
    >> http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl.html
    >>

    >
    > Just a question:
    >
    > Why is the border yround the body in IE complete earound the body and in
    > Mozilla only around the text "Hauptfenster -- TestText --" if I change
    > in your example:
    > body
    > {
    > background-color: rgb(254, 213, 1);
    > font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
    > margin-right: 0;
    > }
    >
    > to
    > body
    > {
    > background-color: rgb(254, 213, 1);
    > font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
    > margin-right: 0;
    > border: 2px solid black;
    > }


    The height of the body element is auto by default, which means it should
    be the height of its contents and no higher.

    Funny things happen with body backgrounds-- they spread all over the
    entire document extent under certain circumstances.

    But for the purposes of the border, Firefox, like most browsers (other
    than IE) sizes the body like any other block.
     
    Ben C, Mar 10, 2008
    #11
  12. Knut Krueger

    Knut Krueger Guest


    > The height of the body element is auto by default, which means it should
    > be the height of its contents and no higher.
    >

    and min-height: 1024px is working but min-height:100%; not :-(

    and its the same if i use another container.


    ......
    .container
    {
    background-color: rgb(154, 213, 1);
    border: 2px solid magenta;
    min-height:100%;
    }
    </style>

    </head>

    <body>
    <div class="container">
    ............
    </div>
    </body>


    Is there any possibility to get the containter or body to 100% size,
    means as big as the background?

    Regards Knut
     
    Knut Krueger, Mar 10, 2008
    #12
  13. Knut Krueger

    Ben C Guest

    On 2008-03-10, Knut Krueger <> wrote:
    >
    >> The height of the body element is auto by default, which means it should
    >> be the height of its contents and no higher.
    >>

    > and min-height: 1024px is working but min-height:100%; not :-(
    >
    > and its the same if i use another container.
    >
    >
    > .....
    > .container
    > {
    > background-color: rgb(154, 213, 1);
    > border: 2px solid magenta;
    > min-height:100%;
    > }
    > </style>
    >
    ></head>
    >
    ><body>
    ><div class="container">
    > ...........
    > </div>
    ></body>
    >
    >
    > Is there any possibility to get the containter or body to 100% size,
    > means as big as the background?


    You need to make sure everything all the way up to the top has a height
    for the percentage to work. Remember percentage heights of auto heights
    are (or should be) ignored.

    html, body { height: 100% } usually does the trick.
     
    Ben C, Mar 10, 2008
    #13
  14. Knut Krueger

    Knut Krueger Guest

    Ben C schrieb:

    > html, body { height: 100% } usually does the trick.



    ok the trick is working :)
    but
    I tired to set the head
    position:absolute;
    bottom:0px;
    right:0px;

    The head is bottom/right with IE
    A big bottom margin with Opera http://localhost/briefwexl/test.php :


    html, body {
    background-color: rgb(254, 213, 1);
    height:100%;
    margin:0px;
    padding:0px;

    }

    A 1px margin with all browsers:
    http://www.briefwexl.at/
    html, body {
    background-color: rgb(254, 213, 1);
    height:100%;
    margin:0px;
    padding:0px;
    border: 1px solid rgb(254, 213, 1);
    }

    Do you hav other hints for that, may some mistake from me ...

    Regards Knut
     
    Knut Krueger, Mar 10, 2008
    #14
  15. Knut Krueger

    Ben C Guest

    On 2008-03-10, Knut Krueger <> wrote:
    > Ben C schrieb:
    >
    >> html, body { height: 100% } usually does the trick.

    >
    >
    > ok the trick is working :)
    > but
    > I tired to set the head
    > position:absolute;
    > bottom:0px;
    > right:0px;
    >
    > The head is bottom/right with IE
    > A big bottom margin with Opera http://localhost/briefwexl/test.php :


    I was about to say why are you trying to position the <head> element,
    but it is literally a head!

    If you want the head 0px from the bottom edge of body, you need to make
    body position: relative so it is the containing block for <div
    class="kopf">. Otherwise the kopf goes at the bottom of the viewport.
     
    Ben C, Mar 10, 2008
    #15
  16. Knut Krueger

    dorayme Guest

    In article <fr2pmv$57s$03$-online.com>,
    Knut Krueger <> wrote:

    > GTalbot schrieb:
    > > http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl.html
    > >

    >
    > Just a question:
    >
    > Why is the border yround the body in IE complete earound the body and in
    > Mozilla only around the text "Hauptfenster -- TestText --" if I change
    > in your example:
    > body{background-color: yellow;}
    >
    > to
    > body{background-color: yellow;border: 2px solid black;}



    You will get a much better idea of things if you put in at the
    top of you css for a moment:

    html {background:red;}

    And now you will begin to see that (as Ben says) "Firefox, like
    most browsers (other than IE) sizes the body like any other
    block".

    Try removing *all* the html markup but leave the css in and
    especially the border on the body. You will see in Firefox a
    black thick (4px) line. This is the border of a body element that
    has no content.

    A container does not grow height for its floated children. If you
    remove the float instructions from the css, you will see how the
    container, the body in this case grows.

    Pardon me if you do understand these things. But in case you want
    more on this, you might try:

    <http://netweaver.com.au/floatHouse>

    Now to matters more curious to me:

    The matter of the relation of the body to the html element is an
    odd one. It may come as a bit of a surprise to see that saying
    nothing about the html element (as often we do not) in the css
    sheet nevertheless does not prevent it from assuming the colour
    specified for the body.

    Even when there is no colour in the body because there is no
    height to the body, the html takes its cue on colour from its
    child in this case:

    <http://netweaver.com.au/alt/knut/knut.html>
    <http://netweaver.com.au/alt/knut/knut2.html>
    <http://netweaver.com.au/alt/knut/knut3.html>

    It *looks* like we have here a case of the parent inheriting the
    child's property values!

    --
    dorayme
     
    dorayme, Mar 11, 2008
    #16
  17. Knut Krueger

    Ben C Guest

    On 2008-03-11, dorayme <> wrote:
    [...]
    > Now to matters more curious to me:
    >
    > The matter of the relation of the body to the html element is an
    > odd one. It may come as a bit of a surprise to see that saying
    > nothing about the html element (as often we do not) in the css
    > sheet nevertheless does not prevent it from assuming the colour
    > specified for the body.
    >
    > Even when there is no colour in the body because there is no
    > height to the body, the html takes its cue on colour from its
    > child in this case:
    >
    ><http://netweaver.com.au/alt/knut/knut.html>
    ><http://netweaver.com.au/alt/knut/knut2.html>
    ><http://netweaver.com.au/alt/knut/knut3.html>
    >
    > It *looks* like we have here a case of the parent inheriting the
    > child's property values!


    There are special rules for all this, and they're also different for
    HTML and XHTML.

    If the html element's actual background is transparent, then it nicks
    body's background instead. But not in XHTML.

    It's all in CSS 2.1 14.2.

    I guess the point of it all is to make setting background on body have
    the same effect that using attributes like bgcolor on it used to.
     
    Ben C, Mar 11, 2008
    #17
  18. Knut Krueger

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-03-11, dorayme <> wrote:
    > [...]
    > > Now to matters more curious to me:
    > >
    > > The matter of the relation of the body to the html element is an
    > > odd one. It may come as a bit of a surprise to see that saying
    > > nothing about the html element (as often we do not) in the css
    > > sheet nevertheless does not prevent it from assuming the colour
    > > specified for the body.
    > >
    > > Even when there is no colour in the body because there is no
    > > height to the body, the html takes its cue on colour from its
    > > child in this case:
    > >
    > ><http://netweaver.com.au/alt/knut/knut.html>
    > ><http://netweaver.com.au/alt/knut/knut2.html>
    > ><http://netweaver.com.au/alt/knut/knut3.html>
    > >
    > > It *looks* like we have here a case of the parent inheriting the
    > > child's property values!

    >
    > There are special rules for all this, and they're also different for
    > HTML and XHTML.
    >


    And there was I musing about backwards causation...

    > If the html element's actual background is transparent,


    Will you excuse me if I muse aloud some more? I am not opposing
    anything you say, I am just thinking through a few issues here.

    If it is transparent, what can you see through it? The canvas!
    Which is "the space where the formatting structure is rendered."

    Does this canvas have a default colour, white? When you specify
    the background of body to any different to white, what exactly is
    happening? It is somehow "painting the canvas"? What? It paints
    the thing behind the html element? If you specify the background
    of the html element, it also paints the canvas. The canvas is
    sort of multi-coloured in this picture, abstractly so,
    considering elements like body can have different sizes even
    within a browsing session.

    It looks like a crazy picture to me involving a pretence of
    giving a background colour to elements to make them different to
    transparent whereas the picture is one of all elements really
    being transparent all along. Specifying backgrounds "to" them is
    really just a way of telling the browser to make this rather
    magical thing, "the canvas" coloured in a particular way in just
    those areas that can shine through.

    I have had in mind for quite some time a simpler model. There is
    no canvas - a least for visual rendering considerations, it is an
    unnecessary fiction. The elements are glass layers. You can paint
    them or not. There are rules for what shines through what if you
    don't.



    > then it nicks
    > body's background instead. But not in XHTML.
    >
    > It's all in CSS 2.1 14.2.
    >
    > I guess the point of it all is to make setting background on body have
    > the same effect that using attributes like bgcolor on it used to.


    --
    dorayme
     
    dorayme, Mar 11, 2008
    #18
  19. Knut Krueger

    Ben C Guest

    On 2008-03-11, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2008-03-11, dorayme <> wrote:
    >> [...]
    >> > Now to matters more curious to me:
    >> >
    >> > The matter of the relation of the body to the html element is an
    >> > odd one. It may come as a bit of a surprise to see that saying
    >> > nothing about the html element (as often we do not) in the css
    >> > sheet nevertheless does not prevent it from assuming the colour
    >> > specified for the body.
    >> >
    >> > Even when there is no colour in the body because there is no
    >> > height to the body, the html takes its cue on colour from its
    >> > child in this case:
    >> >
    >> ><http://netweaver.com.au/alt/knut/knut.html>
    >> ><http://netweaver.com.au/alt/knut/knut2.html>
    >> ><http://netweaver.com.au/alt/knut/knut3.html>
    >> >
    >> > It *looks* like we have here a case of the parent inheriting the
    >> > child's property values!

    >>
    >> There are special rules for all this, and they're also different for
    >> HTML and XHTML.
    >>

    >
    > And there was I musing about backwards causation...
    >
    >> If the html element's actual background is transparent,

    >
    > Will you excuse me if I muse aloud some more? I am not opposing
    > anything you say, I am just thinking through a few issues here.
    >
    > If it is transparent, what can you see through it? The canvas!
    > Which is "the space where the formatting structure is rendered."
    >
    > Does this canvas have a default colour, white?


    Usually white, but it depends on the browser. If you set html and body's
    background to transparent, you will see the colour of the canvas.

    > When you specify
    > the background of body to any different to white, what exactly is
    > happening? It is somehow "painting the canvas"? What? It paints
    > the thing behind the html element?


    That's the idea. If the html element's background is transparent then
    the body's background is applied to the canvas instead.

    > If you specify the background of the html element, it also paints the
    > canvas. The canvas is sort of multi-coloured in this picture,
    > abstractly so, considering elements like body can have different
    > sizes even within a browsing session.


    No you get one or other. If html has a non-transparent background, then
    that paints the canvas, html gets a transparent background, and body's
    background is just body's background.

    In that case, body is just a block that's on top of html (also just a
    block), that's on top of the canvas. So you'll see the canvas colour
    around the edges of body.

    But they recommend for some reason that in HTML documents you leave
    html's background alone and set your desired canvas background on body.

    > It looks like a crazy picture to me involving a pretence of
    > giving a background colour to elements to make them different to
    > transparent whereas the picture is one of all elements really
    > being transparent all along.


    Most elements are transparent (background-color's initial value is
    transparent).

    > Specifying backgrounds "to" them is really just a way of telling the
    > browser to make this rather magical thing, "the canvas" coloured in a
    > particular way in just those areas that can shine through.
    >
    > I have had in mind for quite some time a simpler model. There is
    > no canvas - a least for visual rendering considerations, it is an
    > unnecessary fiction. The elements are glass layers. You can paint
    > them or not. There are rules for what shines through what if you
    > don't.


    The point of the canvas is this.

    Consider this example:

    <div style="width: 200px; height: 200px; overflow: scroll;
    background-color: pink">
    <div style="width: 300px; height: 100px; background-color: gray;
    border: 10px solid green">
    </div>
    </div>

    You can scroll the outer div to find your way to the right edge of the
    inner one, and you are apparently accompanied by pink background all the
    way. This is the effect everyone wants.

    But the truth is the pink square is exactly 200px x 200px and no
    bigger. It doesn't move: you're moving the grey div across it.

    Now try this:

    <div style="width: 200px; height: 200px; overflow: scroll">
    <div style="width: 200px; height: 200px; background-color: pink">
    <div style="width: 300px; height: 100px; background-color: gray;
    border: 10px solid green">
    </div>
    </div>
    </div>

    Scroll to the right and you lose the pink background, it moves to the
    left along with the other contents of the scrolling container.

    This second case is analogous to a browser. The outermost div is the
    viewport, and the next div down is the html (root) element. If you set a
    background on the html element, you would lose it when you scrolled the
    viewport. This would be a problem.

    They might have said that the root element's background is applied to
    the _viewport itself_, making the second case like the first one, and
    meaning you never lost the background when you scrolled. But instead
    they said it stays on the root element, but extends infinitely in all
    directions, which is another (slightly different) way of ensuring that
    you don't lose the background. Hence the concept of the canvas.

    The difference is when you use a background image instead of a solid
    colour: with a canvas, the image moves with the root element when you
    scroll. If the background were put on the viewport, it would always stay
    where it was. Effectively background-attachment would always be fixed.
     
    Ben C, Mar 12, 2008
    #19
  20. Knut Krueger

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-03-11, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2008-03-11, dorayme <> wrote:
    > >> [...]
    > >> > Now to matters more curious to me:


    > The point of the canvas is this.
    >


    I am still looking at your explanation, Ben. Take the delay as a
    compliment. The martian brain is a bit different to the earthling
    one and so please be patient.

    I am resisting impudently suggesting models I have had in mind
    until I see a bit more what the models have to account for.

    Obviously in my practice, I have been able to get by on very
    simple models with the html element as not different to the
    viewport much (at least the bit of it that is not holding the
    head). I have operated on a sort of "Headless Chook" model (body
    being the important bit) to date and it has served me well. But I
    have tastes in the non-practical areas of life and to these I
    will turn my attention as I get time. <g>

    --
    dorayme
     
    dorayme, Mar 13, 2008
    #20
    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. Bob
    Replies:
    24
    Views:
    1,580
  2. Dr Mephesto

    App idea, Any idea on implementation?

    Dr Mephesto, Feb 4, 2008, in forum: Python
    Replies:
    3
    Views:
    745
    Dennis Lee Bieber
    Feb 5, 2008
  3. Replies:
    0
    Views:
    653
  4. thunk
    Replies:
    1
    Views:
    359
    thunk
    Mar 30, 2010
  5. thunk
    Replies:
    0
    Views:
    536
    thunk
    Apr 1, 2010
Loading...

Share This Page