All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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

  • # August 7, 2009 at 4:07 pm


    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


    /* Navigation section */

    #left {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    #left ul { margin: 0; padding:0; }
    #left ul li {
    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 {
    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 */


    Any ideas on how to fix?

    # August 7, 2009 at 4:33 pm

    This reply has been reported for inappropriate content.

    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:

    border-top: 1px solid #000;

    quick easy, and actually far more readable

    # August 7, 2009 at 4:39 pm


    many thanks

    John C

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed