Home/ Questions/Q 3933512
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T23:36:33+00:00

I currently have an issue where Firefox is taking away 1-2 pixels of padding

  • 0

I currently have an issue where Firefox is taking away 1-2 pixels of padding around some text which is in a div. Before writing too much, I will show some pics and post the code so you know what I mean. It might just be the way Firefox renders. Anywho code and pics below:

Chrome/Safari/Ie Screen:

enter image description here

Firefox Screen:

enter image description here

And here is the code:

html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <title>Test Page One</title>
        <LINK REL=StyleSheet HREF="stylesheets/test.css" TYPE="text/css" MEDIA=screen>      
    </head>
    <body>
        <div class="single_label blue_label">Test<div class="remove"></div></div>
    </body>
</html>

Css:

.single_label{ 
  float: left; 
  padding-right: 5px; 
  padding-left: 7px; 
  height: 14px; 
  color: black; 
  font-size: 10px; 
  font-family: Helvetica, Verdana, Arial, sans-serif; 
  text-align: left; 
  width: 74px; 
  vertical-align: bottom
}

.blue_label {
  background-color: #3acbff;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

So can anyone tell me why Firefox is rendering like this and how to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add line-height to your css. I also suggest you to add shorthand properties.

    Here is a working solution (with old/new comparsion): http://jsfiddle.net/dncxK/1/

    enter image description here

    .single_label {
    color:#000;
    float:left;
    font:10px/16px Helvetica, Verdana, Arial, sans-serif;
    padding:0 5px 0 7px;
    text-align:left;
    vertical-align:bottom;
    width:74px;
    height:14px;
}
    • 0