CSS Firefox extends parent div, but not IE or Chrome, bug?

Question

I am trying to make a stylish blog design with a “date block” to the left of the parent div. It works in IE and Chrome, but in Firefox extends the top parent div.

HTML

<div class="post_bg"> <div class="post_inner"> <div class="blue">date</div> text <br /><br /> </div> </div> 

Css

 .post_bg { width: 700px; background-color: #f0f0f0; outline: 1px solid #d8d8d8; border-top: 1px solid #fff; padding: 5px 5px 5px 5px; } .post_inner { clear: both; background-color: #fdfdfd; border: 1px solid #d8d8d8; } .blue { overflow: visible; width: 40px; height: 40px; background-color: #55a4cc; position: relative; bottom: -5px; right: 40px; } 

Here is an image showing my problem:

And while I'm in, how do I get my “text” at the top of the window?

Answer 1

To make the outline work in Firefox, replace:

 outline: 1px solid #d8d8d8; 

Via:

 box-shadow: 0 0 0 1px #d8d8d8; 

To align the text with the top, do .post_inner position: relative; and .blue position: absolute; . Then adjust the .blue position.

Demo: http://jsfiddle.net/ThinkingStiff/8SyGV/

CSS:

 .post_bg { background-color: #f0f0f0; border-top: 1px solid #fff; left: 40px; box-shadow: 0 0 0 1px #d8d8d8; padding: 5px 5px 5px 5px; position: relative; width: 300px; } .post_inner { background-color: #fdfdfd; border: 1px solid #d8d8d8; position: relative; } .blue { background-color: #55a4cc; height: 40px; left: -40px; position: absolute; top: 0; width: 40px; } 

HTML:

 <div class="post_bg"> <div class="post_inner"> <div class="blue">date</div> text <br /><br /> </div> </div> 

Answer 2

This is a “bug” in Firefox 3.X, as described here .

There is a workaround that I found here that uses :before to add an absolutely positioned container that uses outline instead.

So, for your code, you remove outline from .post_bg and add the following CSS to your stylesheet:

 .post_bg:before { bottom: 0px; content: ''; left: 0px; margin: 0; outline: 1px solid #d8d8d8; padding: 0; position: absolute; right: 0px; top: -1px; /* -1 to accomodate border-top in .post_bg */ } 

JSFiddle: http://jsfiddle.net/GqACN/

You should use the new implementation of the .blue class for @ThinkingStiff to solve the text problem mentioned in your question.

Update

This bug can be found here on bugzilla .

However, as @BoltClock pointed out in the comments above, " there is nothing that would indicate how to draw contours relative to positioned descendants " - this is an error, so to speak, because the specification is not clear how it should be implemented. Mozilla has just interpreted the spec differently for Google and Microsoft.