Menu
Im trying to apply background color for whole block c_date.. but its not working.. I tried clear, block everything..
Demo
HTML:
<div class="c_date"> <span class="c_day">30</span>
<span class="c_month">Jun</span>
<span class="c_year">2009</span>
<div style="clear:both;"></div>
</div>
CSS:
.c_date {
position: relative;
width: 40px;
color: #999;
margin: -0px 0 0 0;
background:#999 !important;
display:block;
border:1px solid #ccc;
clear:both;
}
.c_day, .c_month, .c_year {
position: absolute;
}
.c_day {
font-size: 14px;
top: 10px;
}
.c_month {
top: 0;
left: 0;
font-size: 11px;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
rotation: -90deg !important;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
207
You need to apply a clear the float on the parent div to make sure that it occupies the inner elements. You could either insert a <div style="clear:left;"></div> before the parent closes or apply a clearfix class on the parent div. Show activity on this post. You can add overflow:hidden to the .
If Background color not working on Facebook, Most of the time the issue is due to outdated app on the phone. Outdated apps have lots of issue with the feature since the Facebook server may not be able to handle all the request from older app version.
Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.
How do I remove background color in HTML? You can fully remove background color by setting the background-color property to “transparent.”
This is because your c_date div height is 2px 
(the reason is position:absolute; in your other containers).
So you can fix it by adding height to c_date style or changing position property of child elements in it.
92
This can actually be done without the need to position:absolute the day and month spans. This will mean that the height of your c_date element is actually relative to the height of the stacked day and month elements.
I took the liberty of fixing up some of the CSS code that didnt need to be there from your demo too :)
HTML
<div class="c_date">
<span class="c_month">Jun</span><br />
<span class="c_day">30</span>
<span class="c_year">2009</span>
</div>
CSS
.c_date {
position: relative;
width: 40px;
color: #999;
margin: 0 0 0 0;
background:#00F !important;
display:block;
border:1px solid #ccc;
font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */
}
.c_year {
position: absolute;
}
.c_day {
font-size: 14px;
display: inline-block;
line-height: 11px;
padding-bottom: 2px;
text-align:center;
}
.c_month {
font-size: 11px;
display: inline-block;
line-height: 14px;
text-align:center;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
DEMO
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
