Undefined border showed

Hi there,

Please take a look to this page using Firebug or another tool for seeing the code:

Under the menu is <div =“standardpage”> with two divisions inside.
For the left side internal division, there is a class created in CSS file:
#standardpage .split50{
float: left;
height: auto;
margin:1px 1px 1px 1px;
border: solid;
border-color: #cccccc;
width: 45%;

But for any reason it is read by Firefox like this:

#standardpage .split50 {
border: medium solid #CCCCCC;
float: left;
height: auto;
margin: 1px;
padding: 20px;
width: 45%;

So what browsers show is:

  • 20px padding (ok)
  • 3px grey border (I don’t know why)
  • 1px margin

Could you please help me to figure out how this happens? Where are border medium and 3px width defined?

Thanks a lot.

The full syntax for describing a border is:

border:[width] type [color];

If you omit width or color, the browser supplies its own defaults.

To avoid inconsistent or unexpected re, always fully describe the border.

For more information see: http://www.w3.org/TR/CSS2/box.html#propdef-border

To clarify a little the default for border-width is “medium”. That means if you don’t specify the width then the browsers will apply the keyword value “medium” to the border. Unfortunately the exact dimensions of those keywords (thin, medium, thick) are not explicitly defined and browsers may vary in what they think they should apply. The rules they have to follow are:

If no color value is specified for border-color, the border will use the color value of the element.

So when you said “border: solid;” you are effectively getting “border:medium solid [color value of the element]”. Which equals in Firefox to “border:3px solid [color]”.