February 29, 2012

The font is not being displayed at the bottom of the container?

Question by Beginner

This is my HTML code to display font with a background in a small container . .

here is the css

.cons_save h4{font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}

im not able to put it ! in the bottom of that container whatever the other content above it in the container remains

My HTML CODE

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">    
 <span class="cons_save fl clr">
  <h4><?php echo $save. " %"; ?> </h4>
 </span>
</div> 

Answer by Starx

Don’t put heading tags insides spans

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">    
     <div class="cons_save fl clr">
        <h4><?php echo $save. " %"; ?> </h4>
     </div>
</div>

And also heading having a lot of margin & padding by default. So might be the reason to come in the bottom. Be sure to clear it

.cons_save h4 { margin: 0;padding:0; }

It works without the reset too, check here

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!