fixed margin collapse in .main (gray bar below header)

the h4 element has a default top margin, but the .user and .main diff didn't have any.
Because of collapsing margins they were also assigned the same margin which then created the gray bar. This doesn't happen if the parent element has non-zero padding, so I added a 1px top and bottom padding to .main, which fixed the problem

diff --git a/css/standard.css b/css/standard.css
index 5046a6183b943cd3395ecbae9aca623f5f784c73..a6d50142601387e50ea20520cb5572729cee67a0 100644 (file)
--- a/css/standard.css
+++ b/css/standard.css
@@ -37,7 +37,7 @@ header {
 
 .main {
   background-color: #fff;
-  padding: 0em 0em;
+  padding: 1px 0em;
   margin:  0em 3em;
   padding-bottom: 1em;
 }

diff --git a/include/output.php b/include/output.php
index 781fbb77188036b628abccfce0c066e2253683c3..55122e329c44134109673d98a6cd6562d533d9bc 100644 (file)
--- a/include/output.php
+++ b/include/output.php
@@ -411,7 +411,7 @@ function output_header()
      <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
      <link rel="shortcut icon" href="pics/edoko-favicon.png" />
      <link rel="stylesheet" href="css/normalize.css?v=1" />
-     <link rel="stylesheet" href="css/standard.css?v=40" />
+     <link rel="stylesheet" href="css/standard.css?v=41" />
      <link rel="stylesheet" href="css/dateinput.css?v=1"/>
      <script type="text/javascript" src="include/jquery.js"> </script>
      <script type="text/javascript" src="include/jquery.tablesorter.js"></script>