Shouldn't these two boxes have a vertical space separating them in Firefox?

[LorenW]

I am a CSS newbie, but do not understand why Firefox 2.0.0.13 (win) does not honor the margin-bottom in the following code when IE7 and Safari 3.1 do.

Shouldn't the two boxes have a vertical space in-between?

Perhaps someone can help? Thanks...!

<style>
.container {
    width:300px;
    height:300px;
    border: 1px solid #0f0;
}
 
.box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
 
.rel {
    background-color:#f00;
    position: relative;
}
 
.abs {
    background-color:#00f;
    position: absolute;
}
</style>
 
<div class="container">
<div class="rel box">1</div>
<div class="abs box">2</div>
</div>
 

[bartdebruin]

Hello,

Do you really need position:absolute; in the second div?

[drhowarddrfine]

An absolutely positioned element is removed from the normal flow and rises up the stacking order to the "content" of the next positioned element.

[LorenW]

So is this a case when IE and Safari are handling positioning incorrectly? Does this mean I need to use some browser specific code to handle this properly in all cases?

Here is more detailed example of what I am trying to accomplish. The blue box is meant to be an overlay. In all cases, I would like the blue box to cover the lower red box, when it is visible (and not cover the gap). Sometimes the top red box is not there (as you can simulate by clicking the toggle button on the bottom). The heights of the red boxes are dynamic, as simulated by the example.

<script language="JavaScript">
    function toggleDisplay(me){
        if (document.getElementById(me).style.display=="none"){
            document.getElementById(me).style.display="block";
        } else {
            document.getElementById(me).style.display="none";
        }
    }
    function generateRandomWords() {
        var str = "";
        var numWords = 5 + parseInt(Math.random() * 15);
        while (--numWords >= 0) str += "random words ";
        document.write(str);
    }
</script>
<style>
.container {
    width:300px;
    border: 1px solid #0f0;
}
 
.box {
    width: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
 
.abs {
    z-index:1000;
    background-color:#00f;
    position: absolute;
}
 
.rel {
    background-color:#f00;
    position: relative;
}
</style>
 
<button onclick="toggleDisplay('bluebox')" />toggle blue box</button>
<div class="container">
<div class="rel box" id="topredbox">Top red box<br />The red boxes are of variable size.<br /><script>generateRandomWords();</script></div>
<div class="abs box" id="bluebox" style="display: none;">This should just cover the top part of lower box. Not the gap too.<br /><br /></div>
<div class="rel box">Bottom red box<br /><script>generateRandomWords();</script></div>
</div>
<button onclick="toggleDisplay('topredbox')" />toggle top red box</button>
 
 

[LorenW]

drhowarddrfine, point well taken, but then why does the sample code I provided work as expected when changing the margin-bottom references to margin-top?

This seems like inconsistent behavior to me...

[drhowarddrfine]

Today is opening day in baseball so I'm late getting back to this.

Generally, the only "cross browser" issues are between IE and the rest of the world. Always write your markup for the rest of the world because IE is flat out wrong almost every time.

I'll look at this in a bit (since the game is in rain delay :) )

[drhowarddrfine]

The problem is partly due to the invalid markup. You want to always keep in mind that the absolutely positioned element will go all over the place until it finds that next positioned element. In order to contain that element, you'll see I set one of the boxes to 'position:relative'.

In your javascript, there is no such thing as 'language=Javascript', and every script/style must be set as 'type="text/......" Note my changes.

I didn't finish this completely cause I have something to do but perhaps this will give you a start. I think the top box might be getting toggled properly.

EDIT: Well, no it's not. Need a second.

[drhowarddrfine]

Perhaps the easiest thing to do is just add 10px to the top of the blue box. An alternative is to wrap the red boxes in another div and position them to contain the blue box. Then just insert the blue box into those.

If it wasn't the end of the day I could probably think of something simpler/better.

[LorenW]

drhowarddrfine, I really appreciate your assistance.

Your first suggestion of adding the 10px to the top of the blue box doesn't work for me because for the design of the page I need the top of the blue box to be flush with the green outline of the container DIV when the top red box is not there. (You can see that case if you click each toggle button once).

But your second suggestion is simple and works like a charm.

So, here is the full (working) cross-browser solution for anyone who might find it useful:

<script type="text/javascript">
    function toggleDisplay(me){
        if (document.getElementById(me).style.display=="none"){
            document.getElementById(me).style.display="block";
        } else {
            document.getElementById(me).style.display="none";
        }
    }
    function generateRandomWords() {
        var str = "";
        var numWords = 5 + parseInt(Math.random() * 15);
        while (--numWords >= 0) str += "random words ";
        document.write(str);
    }
</script>
<style>
.container {
    width:300px;
    border: 1px solid #0f0;
}
 
.box {
    width: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
 
.boxwrapper {
    border: 1px solid #f0f;
}
 
.abs {
    z-index:1000;
    background-color:#00f;
    position: absolute;
    height: 200px;
}
 
.rel {
    background-color:#f00;
    position: relative;
}
</style>
 
<button onclick="toggleDisplay('bluebox')" />toggle blue box</button>
<div class="container">
 
<div class="rel box" id="topredbox">Top red box<br />The red boxes are of variable size.<br /><script type="text/javascript">generateRandomWords();</script></div>
 
<div class="boxwrapper">
<div class="abs box" id="bluebox" style="display: none;">This should just cover the top part of lower box. Not the gap too.<br /><br /></div>
<div class="rel box">Bottom red box<br /><script type="text/javascript">generateRandomWords();</script></div>
</div>
 
<div class="rel box">Extra red box<br />The red boxes are of variable size.<br /><script type="text/javascript">generateRandomWords();</script></div>
 
</div>
<button onclick="toggleDisplay('topredbox')" />toggle top red box</button>