Databases
StackOverflow2013
Postsdbo
POIE8 - Odd behavior with head margin collapse on change in CSS "display"
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
    primarykey
    data
    text
    <p>I have a strange issue where my head (<code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, etc.) margins are collapsing on me, but only in IE8. I've spent a good deal of time trying to pinpoint the issue I am having, and have narrowed it down to this example.</p> <p>I am almost completely certain that no other page objects can be removed (including the <code>DOCTYPE</code> declaration) while still representing this bug. To make the code as compact as possible, the bug only appears after modifying the display property a couple of times, but the real page has an issue each time the display property is modified (i.e. immediately after any "nav" is followed).</p> <p>I attempted posting this as a jsFiddle, but it was not reproduceable from the result pane. Therefore, I will post the entire, simplified test case inline, written as small/clean as possible:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bug Test of IE8 Collapsing Margin problem&lt;/title&gt; &lt;style type="text/css"&gt; h2 { margin: 20px 0 15px -10px; background: red; } h3 { margin: 10px 0 15px -10px; background: green; } h4 { margin-bottom: -15px; background: blue; } .noShow { display: none; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function show(theDiv) { theDiv = document.getElementById(theDiv); Div1 = document.getElementById('div1'); Div2 = document.getElementById('div2'); Div1.style.display = 'none'; Div2.style.display = 'none'; theDiv.style.display = 'block'; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="javascript: show('div1');"&gt;Nav1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript: show('div2');"&gt;Nav2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="div1"&gt; &lt;h1&gt;Head1&lt;/h1&gt; &lt;h2&gt;Head2&lt;/h2&gt; &lt;h3&gt;Head3&lt;/h3&gt; &lt;h4&gt;Head4&lt;/h4&gt; &lt;br&gt;&lt;br&gt; Click on "Nav2," then "Nav1," then "Nav2" a second time to see the shift in header margins/padding.&lt;br&gt; &lt;/div&gt; &lt;div id="div2" class="noShow"&gt; &lt;h1&gt;Head1&lt;/h1&gt; &lt;h2&gt;Head2&lt;/h2&gt; &lt;h3&gt;Head3&lt;/h3&gt; &lt;h4&gt;Head4&lt;/h4&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I've begun reading a bit about margin collapse and how it's supposed to act this way, but if that's the case, why is IE8 the only browser I've tested with this behavior, and why is it not consistent? I've also tried switching margin with padding to achieve a similar result without the collapsing issue, but unless I did something incorrectly, that had no effect either.</p> <p>I've tried applying <code>overflow:hidden</code> to the <code>noShow</code> declaration. This fixes the problem, but I cannot use it in my design. (Even when adjusting this in the example, it looks wrong and is still inconsistent in its placement.)</p> <p>Does anyone have any good suggestions on how to work around this problem? I'd hate to have to turn off my <code>DOCTYPE</code> and force IE7 mode, as I lose other features (such as pseudo-element <code>:before</code>).</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. USD.N.
    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
    1. VO
      singulars
      1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
      1. USSmag
      1. VTFavorite
    2. VO
      singulars
      1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIE8 does not work like IE7 which doesn't work like IE6 and none of those work like IE9 and NONE of them work like any other browser in the world. Having problems getting IE to work correctly is expected and the norm.
      singulars
      1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
      1. USRob
    2. COI understand that, but this looks more like a true "bug" than a CSS misinterpretation problem, since it is not consistent. The code I've developed already works in IE 5.5/6/7 (IETester), and Firefox 3.6. I'm sure it works in others, but that's all I have to test with.
      singulars
      1. POIE8 - Odd behavior with head margin collapse on change in CSS "display"
      1. USD.N.
 

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