On 01/10/19 15:19, Hawker wrote:
On 10/1/2019 9:47 AM, Don Spam's Reckless Son wrote:
...>
In my case the text overlays the pictures.
Interesting. So Paul and Don see what I see but Hartmut sees it correctly.
I wonder what the difference is and why Hartmut is different.
>
> Hartmut are you using SM 2.53 or just spoofing that UI?
> Maybe broken in 2.49 but not 2.53?
I'm with Paul, Don and Gerard-Jan: SM 2.49.5; it's the same in FF 52 but
FF 62 matches Hartmut's screenshot.
The following things don't seem to make any difference to the displayed
layout:
- enabling JavaScript the site and various 3rd-party sites;
- unblocking privacy-tracking
- spoofing as ancient browsers that don't know about the CSS grid layout
used by the site
- spoofing as browsers 'newer' than Gecko 52.
What we have is roughly this HTML structure:
... -+
|
+- div.p-campaign -+
|
+- div.p-campaign-collage
|
+- header.p-campaign-header
|
+- div.p-campaign-sidebar
|
+- div.p-campaign-description
|
+- div.p-campaign-report-button
|
+- div.p-campaign-value-props
The incorrectly placed image is in div.p-campaign-collage.
The incorrectly underlaid text is in div.p-campaign-description.
The CSS uses a grid layout specified in div.p-campaign (each word
identifies a grid area to be filled with a grid-item with the matching
area, and . means an unnamed area):
grid-template-areas:
"header header header header header"
"collage collage collage sidebar sidebar"
". description description sidebar sidebar"
". content content sidebar sidebar"
". reportbutton reportbutton sidebar sidebar"
". valueprops valueprops valueprops ."
Each p-campaign-x class is assigned to area x, eg:
.p-campaign-collage {
grid-area: collage;
}
So the image (collage) is meant to be shown above the description. But
it doesn't contribute to the height of the containing elements, and
because these elements are allowed to overflow the image appears behind
the description areas.
Using this style:
.p-campaign {
grid-template-rows: auto minmax(480px, auto) auto;
/* instead of
grid-template-rows: auto; */
}
it displays like Hartmut's screenshot. You could override the site with
userContent.css or if you have the Stylish extension installed.
It doesn't seem to be a specific grid issue that might have been fixed
in Gecko->Quantum. The difference seems to be whether the absolutely
positioned background image contributes to the calculated height of the
collage area.
Making the image an actual <img> and removing the absolute positioning
and various paddings again gives a layout with the collage area above
the description. So does forcing the row height for the nested grid in
the collage that holds the image (and potentially other images):
.o-collage--solo {
grid-template-rows: minmax(480px, auto);
}
/df
--
London
UK
_______________________________________________
support-seamonkey mailing list
[email protected]
https://lists.mozilla.org/listinfo/support-seamonkey
