SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    1 Post(s)
    0 Thread(s)

    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.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    NJ, USA
    65 Post(s)
    2 Thread(s)
    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:

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)
    Quote Originally Posted by ronpat View Post

    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:

    Quote Originally Posted by 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]".


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts