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; }
<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".
In ".post-date", where you have "outline-offset: -5px;" = put -1px. ( outline-offset: -1px; ) But delete the second or the first reference.