browser - CSS Firefox expands parent div but not IE or Chrome, bug? -



browser - CSS Firefox expands parent div but not IE or Chrome, bug? -

i'm trying blog stylish design "date block" left of parenting div. works in ie , chrome in firefox top-parent div expands.

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 image showing problem:

and while i'm @ it, how "text" top of box?

to outline work in firefox replace:

class="lang-css prettyprint-override">outline: 1px solid #d8d8d8;

with:

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

to text aligned top create .post_inner position: relative; , .blue position: absolute;. adjust .blue's position accordingly.

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:

class="lang-html prettyprint-override"><div class="post_bg"> <div class="post_inner"> <div class="blue">date</div> text <br /><br /> </div> </div>

css browser

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -