Grow your CSS skills. Land your dream job.

[Solved] Borders not showing in Chrome, Safari & Opera

  • # August 7, 2009 at 4:07 pm

    Hi,

    Have a frustrating problem in that borders around a navigation bar don’t display in Chrome, Safari or Opera but OK in Firefox, IE and netscape. Code below

    CSS

    Code:
    /* Navigation section */

    #left {
    float:left;
    width:201px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    }
    #left ul { margin: 0; padding:0; }
    #left ul li {
    list-style:none;
    margin:0;
    padding:0;
    border-top-width: 0px;
    border-right-width: 0.5px;
    border-bottom-width: 0.5px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    }
    #left ul li a {
    display:block;
    width:152px;
    margin:0;
    padding:5px;
    font-size:11px;
    color: #FFFFFF;
    font-family: Verdana;
    }
    #left ul li a:hover {
    padding:5px 3px 5px 7px;
    }
    #left ul li ul { margin: 0; padding:0; }
    #left ul li ul li { list-style:none; margin:0; padding:0; border-left:none; border-right:none; }
    #left ul li.on {
    padding:4px 0 4px 10px;
    background-repeat: no-repeat;
    background-position: 1px 1px;
    }
    #left ul li ul li a { padding:4px 5px; background:#EFEFEF; }
    #left ul li ul li a:hover { padding:4px 0 4px 10px; }

    /* Navigation section ends */

    HTML

    Any ideas on how to fix?

    # August 7, 2009 at 4:33 pm

    there is no such unit as half a pixel :)

    the minimum is 1px, obviously some browsers are rounding it up to 1, and others are rounding down to 0px.

    alter 0.5′s for 1′s and it shows up fine

    edit: just on a side note, check out some tutorials on shorthand, im pretty sure Chris has one on CSS-Tricks..

    at least for your borders you could define them much faster like so:

    Code:
    border-top: 1px solid #000;

    quick easy, and actually far more readable

    # August 7, 2009 at 4:39 pm

    Greg,

    many thanks

    John C

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".