Undefined border showed

[Sir_Arcturua]

Hi there,

Please take a look to this page using Firebug or another tool for seeing the code:
http://www.libromania.cl/spanish/enter.shtml

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;
padding:20px;
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.

[ronpat]

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

[PaulOB]

@ronpat

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

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:

@sitepointReference

The keyword width values of thin, medium, and thick aren’t explicitly defined—their display will depend on the user agent—but have the following meaning: thin <= medium <= thick.

As an example, Internet Explorer versions (up to and including 7) size thin, medium, and thick borders at 2px, 4px, and 6px respectively, while Firefox 2.0 sizes them at 1px, 3px, and 5px. Internet Explorer version 8+ now falls in line with other modern browsers and renders the border thickness at 1px, 3px, and 5px respectively.

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]”.