Fix an issue with CSS on Firefox.

Newer versions of Firefox do not use grid-column-gap or grid-row-gap,
when either value is a percentage instead of a fixed length, when
computing the size of the element. This is not unreasonable; the size of
the container depends on the spacing, which in turn depends on the
spacing, so defining lengths is difficult.

Get around this by just specifying absolute sizes for margins. Since
most of our pictures are 500x500 px this is still about 5% anyway.

diff --git a/doc/doxygen/stylesheet.css b/doc/doxygen/stylesheet.css
index b6b49bffdce71a867705cf0404ef93ddec7ca12f..d5bc3096ede2d20f97ce88df6c5b9a02d54d139a 100644 (file)
--- a/doc/doxygen/stylesheet.css
+++ b/doc/doxygen/stylesheet.css
@@ -52,10 +52,11 @@ div.image img[src="fe_enriched_h-refinement.png"] {
 .threecolumn {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-column-gap: 5%;
-  grid-row-gap: 5%;
+  grid-column-gap: 25px;
+  grid-row-gap: 25px;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 25px;
 }
 
 /*
@@ -64,10 +65,11 @@ div.image img[src="fe_enriched_h-refinement.png"] {
 .twocolumn {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-column-gap: 5%;
-  grid-row-gap: 5%;
+  grid-column-gap: 25px;
+  grid-row-gap: 25px;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 25px;
 }
 
 /*
@@ -76,10 +78,11 @@ div.image img[src="fe_enriched_h-refinement.png"] {
 .onecolumn {
   display: grid;
   grid-template-columns: 1fr;
-  grid-column-gap: 5%;
-  grid-row-gap: 5%;
+  grid-column-gap: 25px;
+  grid-row-gap: 25px;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 25px;
 }