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
Post a Comment