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

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -