Databases
StackOverflow2013
Postsdbo
POWhat might cause this CSS margin sharing(?) bug in Firefox to occur?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat might cause this CSS margin sharing(?) bug in Firefox to occur?
    primarykey
    data
    text
    <p>I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;style&gt; /* * A small snippet of some CSS resets code from html5doctor and YUI fonts and resets * added just to make sure it's not from weird browser padding/margin. Still happens * if this is removed though */ html, body, div, span, p, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; } body { line-height: 1; } li { list-style: none; } body { color: #333; font-family: Helvetica, Arial, Verdana, Geneva, sans-serif; line-height: 1.3; } /* Some clearfix code from HTML5 Boilerplate */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="padding: 20px; border: solid thin black;"&gt;Hello!&lt;/div&gt; &lt;div&gt; &lt;ul class="clearfix"&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;There&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;should&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;be no&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;margin&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;above&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;this&lt;/li&gt; &lt;li style="float: left; padding: 5px; border: solid thin black;"&gt;list&lt;/li&gt; &lt;/ul&gt; &lt;p style="margin-top: 30px"&gt;Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's a screenshot of what the problem looks like <img src="https://i.stack.imgur.com/Rr2Bf.png" alt="screenshot"></p> <p>So what I'd normally expect to happen here is that there's no margin between the two <code>&lt;div&gt;</code>s, or above the <code>&lt;ul&gt;</code>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <code>&lt;p&gt;</code> is being applied to both the <code>&lt;p&gt;</code>, as well as its containing <code>&lt;div&gt;</code>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <code>&lt;br/&gt;</code>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJohnny
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat might cause this CSS margin sharing(?) bug in Firefox to occur?
      1. USBcelik
      1. VTFavorite
    2. VO
      singulars
      1. POWhat might cause this CSS margin sharing(?) bug in Firefox to occur?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhat might cause this CSS margin sharing(?) bug in Firefox to occur?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload