Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Same CSS, different width of page

2 views
Skip to first unread message

Robert Prins

unread,
Feb 1, 2021, 2:18:53 PM2/1/21
to
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

😉 Good Guy 😉

unread,
Feb 1, 2021, 2:39:49 PM2/1/21
to
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.

David E. Ross

unread,
Feb 1, 2021, 3:09:02 PM2/1/21
to
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)

dale

unread,
Feb 1, 2021, 5:45:45 PM2/1/21
to
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

Thomas 'PointedEars' Lahn

unread,
Feb 1, 2021, 10:00:41 PM2/1/21
to
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.

Robert Prins

unread,
Feb 2, 2021, 5:48:23 AM2/2/21
to
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.

Thomas 'PointedEars' Lahn

unread,
Feb 2, 2021, 2:14:51 PM2/2/21
to
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

Robert Prins

unread,
Feb 3, 2021, 1:08:09 PM2/3/21
to
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?

James Moe

unread,
Feb 3, 2021, 2:23:30 PM2/3/21
to
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.

Thomas 'PointedEars' Lahn

unread,
Feb 3, 2021, 3:00:05 PM2/3/21
to
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/>

Thomas 'PointedEars' Lahn

unread,
Feb 3, 2021, 3:40:26 PM2/3/21
to
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.)
0 new messages