• Same CSS, different width of page

    From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Robert Prins on Mon Feb 1 19:39:46 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    This is a multi-part message in MIME format.
    On 01/02/2021 21:17, Robert Prins wrote:


    I have the suspicion that this is caused by the fact that it uses a
    table to format the page, and <https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-parent-element>
    sort of seems to confirm this, and I'd be grateful if anyone can
    confirm this.

    I have a suspicion that this is caused by the DocType used.  I suggest
    change the first line of the code to:

    <!DOCTYPE html>

    It is time to move on to more latest version if at all possible.




    And yes, this would be another reason to get rid of all the nested
    tables to format the page!

    I agree that tables is the last thing to use for layout unless you are
    using figures that can only be formatted "easily" using tables.

    How is Giuseppe Conte doing these days?  Has he managed to form a new government?


    --

    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <div class="moz-cite-prefix">On 01/02/2021 21:17, Robert Prins
    wrote:<br>
    </div>
    <blockquote type="cite" cite="mid:rv9k6r$93k$1@dont-email.me"><br>
    <br>
    I have the suspicion that this is caused by the fact that it uses
    a table to format the page, and
    <a class="moz-txt-link-rfc2396E" href="https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-parent-element">&lt;https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-
    parent-element&gt;</a>
    sort of seems to confirm this, and I'd be grateful if anyone can
    confirm this.
    <br>
    </blockquote>
    <p>I have a suspicion that this is caused by the DocType used.  I
    suggest change the first line of the code to:</p>
    <p>
    <blockquote type="cite">&lt;!DOCTYPE html&gt;</blockquote>
    </p>
    <p>It is time to move on to more latest version if at all possible.</p>
    <p><br>
    </p>
    <p><br>
    </p>
    <blockquote type="cite" cite="mid:rv9k6r$93k$1@dont-email.me">
    <br>
    And yes, this would be another reason to get rid of all the nested
    tables to format the page!
    <br>
    </blockquote>
    <p>I agree that tables is the last thing to use for layout unless
    you are using figures that can only be formatted "easily" using
    tables.</p>
    <p>How is Giuseppe Conte doing these days?  Has he managed to form a
    new government?<br>
    </p>
    <p><br>
    </p>
    <div class="moz-signature">-- <br>
    <div style="background-color: blue; color: yellow; font-weight:
    bolder; display: grid; align-items: center; justify-items:
    center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
    ">
    <p>With over 1.2 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version of
    windows.</p>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Robert Prins@21:1/5 to All on Mon Feb 1 21:17:30 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    I'm trying to convert existing html/css into something that's using more CSS and
    less in-line styles, and I'm baffled by the fcat that one of the five pages is refusing to honour the max-width.

    The site is at <https://prino.neocities.org/www/chp/cover.html>, and you can just click the title, and follow that by clicking the ">" arrow two times to arrive at <https://prino.neocities.org/www/chp/report.html> and that page is just wide, wide, wide.

    I have the suspicion that this is caused by the fact that it uses a table to format the page, and <https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-parent-element>
    sort of seems to confirm this, and I'd be grateful if anyone can confirm this.

    And yes, this would be another reason to get rid of all the nested tables to format the page!

    Robert
    --
    Robert AH Prins
    robert(a)prino(d)org
    The hitchhiking grandfather - https://prino.neocities.org/indez.html
    Some REXX code for use on z/OS - https://prino.neocities.org/zOS/zOS-Tools.html

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From David E. Ross@21:1/5 to Robert Prins on Mon Feb 1 12:08:55 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    On 2/1/2021 1:17 PM, Robert Prins wrote:
    I'm trying to convert existing html/css into something that's using more CSS and
    less in-line styles, and I'm baffled by the fcat that one of the five pages is
    refusing to honour the max-width.

    The site is at <https://prino.neocities.org/www/chp/cover.html>, and you can just click the title, and follow that by clicking the ">" arrow two times to arrive at <https://prino.neocities.org/www/chp/report.html> and that page is just wide, wide, wide.

    I have the suspicion that this is caused by the fact that it uses a table to format the page, and <https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-parent-element>
    sort of seems to confirm this, and I'd be grateful if anyone can confirm this.

    And yes, this would be another reason to get rid of all the nested tables to format the page!

    Robert


    According to <http://validator.w3.org/>, the Web page at <https://prino.neocities.org/www/chp/report.html> has 11 errors,
    including at least one error relating to the "style" element.

    --

    David E. Ross
    <http://www.rossde.com/>.

    The only reason we have so many laws is that not enough people will do
    the right thing. (© 1997 by David Ross)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From dale@21:1/5 to Robert Prins on Mon Feb 1 17:45:44 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    On 2/1/2021 4:17 PM, Robert Prins wrote:
    I'm trying to convert existing html/css into something that's using more
    CSS and less in-line styles, and I'm baffled by the fcat that one of the
    five pages is refusing to honour the max-width.

    The site is at <https://prino.neocities.org/www/chp/cover.html>, and you
    can just click the title, and follow that by clicking the ">" arrow two
    times to arrive at <https://prino.neocities.org/www/chp/report.html> and
    that page is just wide, wide, wide.

    I have the suspicion that this is caused by the fact that it uses a
    table to format the page, and <https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-affecting-the-width-of-the-parent-element>
    sort of seems to confirm this, and I'd be grateful if anyone can confirm this.

    And yes, this would be another reason to get rid of all the nested
    tables to format the page!

    Robert


    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    ???

    --
    Minister Dale Kelly, Ph.D.
    https://www.dalekelly.org/
    Board Certified Holistic Health Practitioner
    Board Certified Alternative Medical Practitioner

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to dale on Tue Feb 2 04:00:39 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    dale wrote:

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    https://www.w3fools.com/

    --
    PointedEars
    FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
    Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Robert Prins@21:1/5 to David E. Ross on Tue Feb 2 12:47:02 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    On 2021-02-01 20:08, David E. Ross wrote:
    On 2/1/2021 1:17 PM, Robert Prins wrote:
    I'm trying to convert existing html/css into something that's using more CSS
    and
    less in-line styles, and I'm baffled by the fcat that one of the five pages
    is refusing to honour the max-width.

    The site is at <https://prino.neocities.org/www/chp/cover.html>, and you can
    just click the title, and follow that by clicking the ">" arrow two times to
    arrive at <https://prino.neocities.org/www/chp/report.html> and that page is
    just wide, wide, wide.

    I have the suspicion that this is caused by the fact that it uses a table to
    format the page, and
    <https://stackoverflow.com/questions/51801266/why-is-table-layout-fixed-
    affecting-the-width-of-the-parent-element>
    sort of seems to confirm this, and I'd be grateful if anyone can confirm
    this.

    And yes, this would be another reason to get rid of all the nested tables to
    format the page!

    Robert


    According to <http://validator.w3.org/>, the Web page at <https://prino.neocities.org/www/chp/report.html> has 11 errors,
    including at least one error relating to the "style" element.

    You should be happy to know that it now, when validated as html5, has 982 errors!

    Did you read the first paragraph of my post:

    "I'm trying to convert existing html/css into something that's using more CSS and less in-line styles, and I'm baffled by the fcat [sic] that one of the five pages is refusing to honour the max-width."

    And the max-width issue is indeed caused by the (way to wide) tables, which I'm trimming now, before I start removing all the non-html5-compliant stuff.

    Robert
    --
    Robert AH Prins
    robert(a)prino(d)org
    The hitchhiking grandfather - https://prino.neocities.org/indez.html
    Some REXX code for use on z/OS - https://prino.neocities.org/zOS/zOS-Tools.html

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Robert Prins on Tue Feb 2 20:14:46 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    Robert Prins wrote:

    On 2021-02-01 20:08, David E. Ross wrote:
    According to <http://validator.w3.org/>, the Web page at <https://prino.neocities.org/www/chp/report.html> has 11 errors,
    including at least one error relating to the "style" element.

    You should be happy to know that it now, when validated as html5, has 982 errors!

    Did you read the first paragraph of my post:

    "I'm trying to convert existing html/css into something that's using more
    CSS and less in-line styles, and I'm baffled by the fcat [sic] that one of the five pages is refusing to honour the max-width."

    And the max-width issue is indeed caused by the (way to wide) tables,
    which I'm trimming now, before I start removing all the
    non-html5-compliant stuff.

    You have this backwards. *First* you have to have valid markup before you
    can have any hope of CSS working as specified. It might be better to start
    a new document taking over the original content step by step while
    considering how the same or better presentation can be done using CSS.

    With *Valid* markup, “max-width” for the “body” element works fine even where there are wide tables:

    <http://PointedEars.de/es-matrix>

    Of course, “max-width” does not and reasonably cannot apply to tables: If the table content is too wide for the column, then the table width *has to* grow. The only way to work around that is to format the table “display: block” or inline-* or use responsive CSS that formats table cells as
    floating inline block if the viewport/body width is smaller than a defined limit.


    Please stop any mindless crossposting-without-Followup-To.

    F’up2 .html
    --
    PointedEars
    FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
    Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Robert Prins@21:1/5 to Thomas 'PointedEars' Lahn on Wed Feb 3 20:06:33 2021
    On 2021-02-02 19:14, Thomas 'PointedEars' Lahn wrote:
    Robert Prins wrote:

    On 2021-02-01 20:08, David E. Ross wrote:
    > According to <http://validator.w3.org/>, the Web page at
    > <https://prino.neocities.org/www/chp/report.html> has 11 errors,
    > including at least one error relating to the "style" element.

    You should be happy to know that it now, when validated as html5, has 982
    errors!

    Did you read the first paragraph of my post:

    "I'm trying to convert existing html/css into something that's using more
    CSS and less in-line styles, and I'm baffled by the fcat [sic] that one of >> the five pages is refusing to honour the max-width."

    And the max-width issue is indeed caused by the (way to wide) tables,
    which I'm trimming now, before I start removing all the
    non-html5-compliant stuff.

    You have this backwards. *First* you have to have valid markup before you can have any hope of CSS working as specified. It might be better to start
    a new document taking over the original content step by step while considering how the same or better presentation can be done using CSS.

    Reducing the browser window still doesn't reformat the text, which isn't nice, but for the rest all five pages W3C validate without any messages, so I'll leave
    it at that for now.

    With *Valid* markup, “max-width” for the “body” element works fine even
    where there are wide tables:

    <http://PointedEars.de/es-matrix>

    I'm sure, but for these pages that bask in obscurity, I think that I'm happy for
    now. I'll accept any suggestions on how to improve matters with gratitude.

    I am a bit puzzled however, as <https://prino.neocities.org/mario_rinvolucri/cover.html> uses the same "Bernd Wechner" method of navigation, and that does reflow the text upon reducing the width of the browser window.

    FWIW, Bernd converted both books first, and his "California Highway Police" report html is, how do you say this in a friendly way? Well, check it out @ <https://validator.w3.org/nu/?doc=http%3A%2F%2Fbernd.wechner.info%2FHitchhiking%2FCHP%2F>
    And using naked <ul> tags in the Rinvolucri book to get the text to indent? Ouch...

    Of course, “max-width” does not and reasonably cannot apply to tables: If the table content is too wide for the column, then the table width *has to* grow. The only way to work around that is to format the table “display: block” or inline-* or use responsive CSS that formats table cells as floating inline block if the viewport/body width is smaller than a defined limit.

    Life's too short, still lot's of work to convert "Anhalterwesen und Anhaltergefahren"...

    Please stop any mindless crossposting-without-Followup-To.

    Happy now?

    Robert
    --
    Robert AH Prins
    robert(a)prino(d)org
    The hitchhiking grandfather - https://prino.neocities.org/indez.html
    Some REXX code for use on z/OS - https://prino.neocities.org/zOS/zOS-Tools.html

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Robert Prins on Wed Feb 3 21:00:02 2021
    Robert Prins wrote:

    On 2021-02-02 19:14, Thomas 'PointedEars' Lahn wrote:
    Robert Prins wrote:
    And the max-width issue is indeed caused by the (way to wide) tables,
    which I'm trimming now, before I start removing all the
    non-html5-compliant stuff.

    You have this backwards. *First* you have to have valid markup before
    you can have any hope of CSS working as specified. It might be better to
    start a new document taking over the original content step by step while
    considering how the same or better presentation can be done using CSS.

    Reducing the browser window still doesn't reformat the text, […]

    Because *you* *put* *the* *whole* *content* *in* *one* *big* *table*.

    <facepalm/>

    A table is always as wide as its widest row, and you have tables *in the
    table cells* that are very wide themselves.

    With *Valid* markup, “max-width” for the “body” element works fine even
    where there are wide tables:

    <http://PointedEars.de/es-matrix>

    I'm sure, but for these pages that bask in obscurity, I think that I'm
    happy for now. I'll accept any suggestions on how to improve matters with gratitude.

    I am a bit puzzled however, as <https://prino.neocities.org/mario_rinvolucri/cover.html> uses the same "Bernd Wechner" method of navigation,

    WTF is Bernd Wechner, and why are you listening to him?

    and that does reflow the text upon reducing the width of the browser
    window.

    This is a feature of HTML, not CSS. It works automagically as long as one
    does not deliberately sabotage it (like with one big table, and tables
    inside tables). The only contribution of CSS there is to limit the body
    width. The (unnecessary) “table” element is *in that instance* "happy to oblige" because it consists only of two columns, and in one column it
    contains *only* wrappable text.

    With CSS one would do this with a background image and a “padding-left” for the “body” element or a “margin-left” for the container element as wide as
    the image (and a “max-width” so that the text does not become too wide if the viewport is wide). An example for that can be found in the W3C CSS Specifications itself; for example

    <https://www.w3.org/TR/2018/REC-selectors-3-20181106/>

    --
    PointedEars
    FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
    Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Moe@21:1/5 to Robert Prins on Wed Feb 3 12:23:23 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    On 2/1/21 2:17 PM, Robert Prins wrote:

    I have the suspicion that this is caused by the fact that it uses a table to format the page,

    Set a max-width for the <td>.

    --
    James Moe
    jmm-list at sohnen-moe dot com
    Think.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to James Moe on Wed Feb 3 21:40:22 2021
    XPost: comp.infosystems.www.authoring.stylesheets

    James Moe wrote:

    On 2/1/21 2:17 PM, Robert Prins wrote:
    I have the suspicion that this is caused by the fact that it uses a table
    to format the page,

    Set a max-width for the <td>.

    A recipe for disaster.

    The original mistake must be fixed instead, which is to put the whole
    content in one big table. This should never be done (nowadays), especially
    not if the content contains tables itself (because, AISB, a table is always
    as wide as its widest row).

    The situation there can be improved considerably by a few surgical moves (BTDT):

    1. Separate the big content table into two tables: one for the header
    (for now), and one for the rest (from here: “content table”).

    2. Put the header in a “header” element.

    3. Move the content of .header into a “h1” element outside the table,
    or at the very least wrap a “h1” element around it.

    4. Move the navigation into a “nav” element outside the table.

    5. Move .copyright outside the table as a “p” element (or “div” element
    if it should contain “p”s), and remove the then-empty header table.

    (Use floats if you absolutely must restore the original presentation.
    [NOT recommended])

    6. Put the content of the second table cell into a top-level “main” element
    outside the content table. (The footer may be put into a top-level
    “footer” element following the “main” element.)

    7. Remove the then-empty content table.

    8. Remove unnecessary right margins, and use CSS to add bottom borders and
    margins as necessary.

    This can even be done in the “Elements” tab of Chromium Dev Tools (BTDT). When satisfied with the basic presentation, the new markup and CSS can
    replace the old markup in the HTML and CSS file.

    One of the many things then still on the to-do list is to fix the heading hierarchy: There would be a “h1” element now, and there are “h3” elements in
    the original content, but there is no “h2” element. Therefore, all “hX”
    elements in the content have to be pulled up one level (h3 → h2, etc.)

    --
    PointedEars
    FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
    Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)