CSS space lines between spans -
i have structure:
<div class="gbigpage"> <span class="gbigmonthshort">feb</span><br /> <span class="gbigdayshort">23</span><br /> <span class="gbigyearshort">2011</span> </div>
the gaps between text lines big, need them shortened virtually touching.
/* mouseover div day numbers */ .gbigpage{ height:45px; width:30px; font-family:arial; font-weight:bold; background-color:#ffee99; text-align:center; border-top:1px solid #c0c0c0; border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0; position:absolute; z-index:3; } .gbigpage:hover{ cursor:pointer; } /* in big day box, month @ top */ .gbigmonthshort{ text-transform:uppercase; font-size:11px; } .gbigyearshort{ font-size:11px; } .gbigdayshort{ font-size:16px; }
i can't relative positioning spans, there bug in chrome flickers mouseover effect, pure css thing seems work.
fiddle example: http://jsfiddle.net/gmksv/
all need line-hight in css. add gbigpage
.
here code:
.gbigpage{ height:45px; width:30px; font-family:arial; font-weight:bold; background-color:#ffee99; text-align:center; border-top:1px solid #c0c0c0; border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0; position:absolute; z-index:3; line-height: 13px; }
demo on jsfiddle
hope helps!
Comments
Post a Comment