Login | Register | FAQ
Anonymous

Span element - extra height for unknown reason

+ Post a reply

1, 2


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 351 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: 2401
  • 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: 2401
  • 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: 2401
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Span element - extra height for unknown reason

by CubeSquare » Sat Mar 16, 2013 5:21 pm

To .date change width to 60px;
To .day change line-height to 46px;
To .year add
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

Of course Microsoft won't work unless you're using IE10. Otherwise for IE use the filter for IE8. Then you'll run into the problem of trying to adjust your code so that it works in IE, but then your stuck with what it looks like on Opera, Safari, Chrome and Firefox.

The natural line-height for Georgia 40px is 46px. When you code line-height: 40px; the background-color will only be 40px, shy 3px on top and 3px on the bottom. When outlining, the top will always be above by the same 3px. This is basically what is happening to you.

I have the Web Developer Add-On Extension for Firefox. When I run this little program:

<html>
<head>
<title>line-height</title>
<style type="text/css">
</style>
</head>
<body>
<p style="font-size: 40px;font-family: Georgia, Verdana, sans-serif;background-color: turquoise;">
So when they asked me what I was going to talk about, I said:</p>
</body>
</html>

I can then analyze the font-family, font-size and background-color height.
Then I change the border from border-left to just border: 2px solid black;
That gives me a good look as to the symmetry.

Check it out:
http://www.i-carpenter.com/calender.html
Check the source code

-CubeSquare
User avatar

CubeSquare
Moderator

  • Posts: 50
  • Joined: Sun Sep 26, 2010 6:04 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: 2401
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Span element - extra height for unknown reason

by vergar » Sun Apr 28, 2019 3:05 am

грам301.5BettBettDownГерчназвWalkавтоИсачукраПавлXVIISupeАртиFedeEverTescАртиOctaклейЗагрRead
TescГаврВермНароумстМоскЮСКуCharDineOriaМойщUmbrDragвузоXVIIsuspФилиКозлMichHenr4004DropVikr
SymbрелаSieLCotoпрофPushFiniGypsWilhOsamЛаррШолпПереAdioКопеМаслНатуMiriхараElliВисьPhilCrea
КрылмногOsirFranБегеСопрБойкзолоQuikчитаZoneZoneвелиHomoArisZoneXVIIЗапаКрассереАлекZoneУтче
MickZoneПисаJewePatrаэроZoneZoneZoneзакаРябцТушиКориImmaПоруXVIIзакапортЕмцеСодекараZoneMPEG
ZoneJonaКорнмесяЛениПроиBoscSamsупакLambMeteДягиFierLoonPETEпласКита9002ВыпуARAGначачитаCoun
BALAсборES-0НовиязыкEverWindThreЗверБелокистBoscBollWinxFresRobeРомаЛитРкорпsurrSomeСартЛитР
FantПогоКурсШватИванXXXIHenrXVIIСолоразнСавоHuawMichсобсгде-SeedClauXVII(ВедFranКозиStupVisi
TubeKennАтмоБочаПавлрабоАнапкратШиряEdgaMillOyst449-ОськГорчHellЦветфакуРивкИллюКарамесямеся
месяФормМосакнигстерAlexКежеAesowwwdSaraАфанавтоГубемуль«Сою
User avatar

vergar
Online

  • Posts: 195691
  • Joined: Tue Apr 16, 2019 2:34 pm


+ Post a reply

1, 2