Login | Register | FAQ
Anonymous

Span element - extra height for unknown reason

+ Post a reply

8 posts Page 1 of 1


Span element - extra height for unknown reason

by sourabh.coder » Fri Mar 15, 2013 5:18 pm

I made a CSS for a fancy date display, but the height above was a bit extra and I cannot remove it.
I tried lowering padding, height, margin but nothing worked. Is it line-height causing the extra height?
PS: Also see the picture attached.
PS2: Pasted my CSS code into <style> just so that I can paste it here easily.

Code: Select all
<html>
<head>
   <title>Calender</title>
   <!-- <link rel="stylesheet" type="text/css" href="style/style.css"> -->
   <style type="text/css">
   .date{
      border-left: 2px solid black;
      display: block;
      position: relative;
      font-family: Verdana, sans-serif;
      font-size: 30px;
      padding: 0 0 5px 5px;
      width: 70px;
   }

   .day{
      font-family: Georgia, Verdana, sans-serif;
      font-size: 40px;
      line-height: 40px;
   }

   .month{
      text-transform: uppercase;
      display: block;
      font-size: 15px;
      padding-top: 3px;
   }

   .year{
      font-size: 12px;
      position: absolute;
      top: 21px;
      left: 37px;
      -webkit-transform: rotate(-90deg);
   }
   </style>
</head>
<body>
   <div class="date">
      <span class="day">15</span>
      <span class="month">sept</span>
      <span class="year">2013</span>
   </div>
</body>
</html>

Attachments

  1. a.png (2.76 KiB) Downloaded 3200 times

User avatar

sourabh.coder

  • Posts: 9
  • Joined: Thu Mar 07, 2013 6:56 pm

Re: Span element - extra height for unknown reason

by XainPro » Fri Mar 15, 2013 10:22 pm

i think you need to reset CSS
try this version and tell me is it solved ?

Code: Select all
<html>
<head>
   <title>Calender</title>
   <!-- <link rel="stylesheet" type="text/css" href="style/style.css"> -->
   <style type="text/css">
   * {
      margin:0;
      padding:0;
      }
   .date{
      border-left: 2px solid black;
      display: block;
      position: relative;
      font-family: Verdana, sans-serif;
      font-size: 30px;
      padding: 0 0 5px 5px;
      width: 70px;
   }

   .day{
      font-family: Georgia, Verdana, sans-serif;
      font-size: 40px;
      line-height: 40px;
   }

   .month{
      text-transform: uppercase;
      display: block;
      font-size: 15px;
      padding-top: 3px;
   }

   .year{
      font-size: 12px;
      position: absolute;
      top: 21px;
      left: 37px;
      -webkit-transform: rotate(-90deg);
   }
   </style>
</head>
<body>
   <div class="date">
      <span class="day">15</span>
      <span class="month">sept</span>
      <span class="year">2013</span>
   </div>
</body>
</html>
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Span element - extra height for unknown reason

by sourabh.coder » Sat Mar 16, 2013 10:58 am

No it didn't work.
User avatar

sourabh.coder

  • Posts: 9
  • Joined: Thu Mar 07, 2013 6:56 pm

Re: Span element - extra height for unknown reason

by XainPro » Sat Mar 16, 2013 12:53 pm

hmm maybe its your browser problem try checking in all browsers i which browser you are using ?
i am using Firefox and i think its working.
i would recommend you do a search about CSS rest.
you need to reset you default browsers CSS.
Regards,
Xain
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Span element - extra height for unknown reason

by sourabh.coder » Sat Mar 16, 2013 2:32 pm

I am using chrome. But I tried it in Fiefox/Opera and it looks he same (except the rotate() of course). The height of span.day element exceeds the height of div.date element. I tried it in Chrome v24+
I tried changing properties randomly and it seems that either giving padding-top: 5px to .date or making line-height: 45; when font-size: 40; works to get .day inside .date but still there's the extra height.
________________

CSS reset didn't work. just like *{padding:0; margin:0;} it just removed the body's default margins and moved the element to top left corner

BTW I forgot to ask this earlier, does *{/*Any property here*/} means applying it to every tag, class, id?
User avatar

sourabh.coder

  • Posts: 9
  • Joined: Thu Mar 07, 2013 6:56 pm

Re: Span element - extra height for unknown reason

by XainPro » Sat Mar 16, 2013 3:52 pm

yes * means all like *.* :)
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Span element - extra height for unknown reason

by sourabh.coder » Sun Mar 17, 2013 5:12 pm

Thanks CubeSquare !!

That answers everything. I'll try few more experiments with it now.

Thanks a lot for your help CubeSquare and Xain :D
User avatar

sourabh.coder

  • Posts: 9
  • Joined: Thu Mar 07, 2013 6:56 pm

Re: Span element - extra height for unknown reason

by XainPro » Mon Mar 18, 2013 1:22 pm

lolz i should start practicing CSS 3 NOW :)
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1