CODEWITHSUNDEEP
css
G.L.P
G.L.P

Reputation: 7207

background color is not working

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);
}

Upvotes: 6

Views: 1990

Answers (3)

haxxxton
haxxxton

Reputation: 6442

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

Upvotes: 4

Sergey Pekar
Sergey Pekar

Reputation: 8745

This is because your c_date div height is 2px enter image description here (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.

Upvotes: 5

RST
RST

Reputation: 3925

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: -0px 0 0 0;
    background-color: #999 !important;
    display:block;
    border:1px solid #ccc;
    clear:both;
    height: 30px; //change to your needs

}

Upvotes: 3

Related Questions