Help With Css Shadows And Outline

Discussion in 'CSS' started by saadi123, Dec 19, 2010.

  1. #1
    I am using css outline and box shadow in a div. The problem is that how to I align the css outline as the shadow in a div is also being considered a a div area by fire fox. I want the outline(border) covers the date area evenly i.e it is perfectly alligned.
    I've tried padding-left but its not working.

    Please help.

    my site url is saadi.000a.biz
    I'm talking about the date section of the post.
    here is the code

    .post-date {
    position: relative;
    width: 55px;
    background: #db0000;
    outline: 1px dashed #fffeee;
    outline-offset: -6px;
    padding-left: 9px;
    box-shadow: -2px 2px 1px #000;
    -webkit-box-shadow: -2px 2px 1px #000;
    -moz-box-shadow: -2px 2px 1px #000;
    height: 53px;
    top: 10px;
    left: -60px;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    }


    .post-month {
    font-size: 13px;
    text-transform: uppercase;
    color: #ffeeee;
    text-align: center;
    display:block;
    line-height: 10px;
    padding-top: 10px;
    padding-left: -3px;
    margin-left: -3px;
    }

    .post-day {
    font-size: 18px;
    text-transform: uppercase;
    color: #ffeeee;
    padding-left: -3px;
    text-align: center;
    display:block;
    line-height: 18px;
    padding-top: 7px;
    margin-left: -3px;
    }
     
    saadi123, Dec 19, 2010 IP
  2. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <link href="http://saadi.000a.biz/wp-content/themes/black_grey/style.css" rel="stylesheet" type="text/css" />
    
    <link rel="stylesheet" type="text/css" href="http://saadi.000a.biz/wp-content/themes/black_grey/style.css" media="screen" />
    HTML:
    You reference your stylesheets two times.
    Delete the second, Today is not need to put media="screen".
     
    iulzi, Dec 19, 2010 IP
  3. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    In ".post-date", where you have "outline-offset: -5px;" = put -1px. ( outline-offset: -1px; )
    But delete the second or the first reference.
     
    Last edited: Dec 19, 2010
    iulzi, Dec 19, 2010 IP