Same CSS, different width of page

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

Arno Welzel

unread,

Feb 3, 2021, 8:26:48 AM2/3/21

to

Thomas 'PointedEars' Lahn:

> dale wrote:
>
>> https://www.w3schools.com/css/css_rwd_mediaqueries.asp
>
> https://www.w3fools.com/

"Today, W3Schools has largely resolved these issues and addressed the
majority of the undersigned developers' concerns. For many beginners,
W3Schools has structured tutorials and playgrounds that offer a decent
learning experience. Do keep in mind: a more complete education will
certainly include MDN and other reputable resources."

--
Arno Welzel
https://arnowelzel.de

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: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.)