Grow your CSS skills. Land your dream job.

borders problems

  • # April 17, 2013 at 11:02 pm

    hi guys ,
    i have a little problem with my css file . some borders are not reached to the end of the div ..

    this my markup :

    نحن والعالم المعاصر متآلفون ومتكاتفون ونساعد بعضنا بعضا ، هنا دنيتنا ، هنا بيتنا ، هنا اهلنا ،، هذا الشارع هو شارعنا ، نحن كا زلنا نعيش هنا ، ونأكل هنا ، ونلعب هنا ،، حينما نتحدث عن المرح يكون الحديث هنا ، الذكريات من الصعب أن تمحى بسهولة خاصة عندما تتعلق بسعادتنا وفرحنا ،، أسأل الله لنا ولكم دوام الصحة والعافية ،، دمتم طيبين ،، محبكم عبدالماجد

    and this is my css :

    .posts {
    background : #fcfcfc;
    border : 1px solid black ;
    margin-bottom : 5px;
    padding : 10px;

    }

    .headerpost {
    border : 1px solid black ;
    position : relative;
    overflow : hidden ;
    width : 100%;

    }
    .postthumb {

    }

    .postdate {
    background : #f1c832 ;
    display : block;
    opacity: .7;
    /* fix for IE

    FOR IE 5-7 :
    filter: alpha(opacity=70);

    FOR IE 8
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
    */

    position : absolute;
    top : 5px ;
    left : 5px;
    padding : 3px 5px;
    -webkit-border-radius : 3px ;
    -moz-border-radius : 3px ;
    border-radius : 3px;
    }

    .mid-headerpost {
    /* border : 1px solid black ; */

    }
    .posttilte a {
    color : #3d435a ;
    font-size : 24px;
    text-decoration : none;
    font-weight: bold;

    }

    .posttilte a:hover {
    color : #3d435a ; /* لون المدونة */
    }

    .posttypeicon {
    width : 50px;
    border-left: 1px solid black ;
    float : right;
    border-top : 1px solid black ;

    }
    .posttilte{

    float : right;
    height : 48px;
    line-height : 50px;
    width : 564px;
    border-top : 1px solid black ;

    }

    .posttilte a{
    padding-right : 8px;
    }

    .bot-headerpost {
    clear : both;
    width : 616px;
    border-top : 1px solid black ;
    height : 23px;

    }

    .bot-headerpost a {
    float : right;
    text-decoration : none;
    color : #912039;
    margin-right: 5px;
    height : 23px;
    line-height: 23px;

    }
    .bot-headerpost img {
    margin-top : 3px;
    }

    .postmeta-auther {
    float : right;
    width : 25%;

    }

    .postmeta-comments-number {
    float : right;
    width : 25%;
    }

    .postmeta-views {
    float : right;
    width : 25%;
    }

    .postmeta-category {
    float : right;
    width : 25%;
    }

    .contentpost {
    clear : both ;
    }

    .postmeta-auther-icon{
    float :right;
    width : 17px;
    }

    .postmeta-comments-number-icon{
    float :right;
    width : 17px;
    }
    .postmeta-views-icon{
    float :right;
    width : 17px;
    }
    .postmeta-category-icon{
    float :right;
    width : 17px;
    }

    .contentpost-content {
    border-bottom : 1px solid black ;
    border-right :1px solid black ;
    border-left : 1px solid black ;
    direction : rtl ;
    padding : 8px;

    }

    .postcontnent p {

    }

    .rmore {
    padding-top: 7px;
    padding-right : 540px;

    }

    .rmore a{
    text-decoration : none;
    color : #3d435a ;

    }
    .rmore a:hover{
    color : #b32f46;

    }

    .contentpost-tags {
    border-bottom : 1px solid black ;
    border-right :1px solid black ;
    border-left : 1px solid black ;
    clear : both;

    }

    .tagstitle {
    overflow : auto ;
    width: 100%;
    height : 22px;

    }
    .tagstitle-icon {
    float : right ;
    margin : 3px 3px;

    }

    .tagstitle-text {
    float : right;
    height: 22px;
    line-height : 22px;

    }
    .tagstitle-text h1{
    display: inline;
    margin-left : 3px;
    }

    .tagstitle-text a{
    text-decoration : none;
    color : #912039;
    }

    .tagstitle-text a:hover{
    color : #3d435a ;

    }

    i captured an image and i mark this problems with red circles .

    direct link to the image :
    [http://s23.postimg.org/na2ofmior/u8u8u.png](http://s23.postimg.org/na2ofmior/u8u8u.png “http://s23.postimg.org/na2ofmior/u8u8u.png”)

    i need the borders reach the end of the div .

    # April 18, 2013 at 2:08 am

    Think it might be a bug try a different browser

    # April 18, 2013 at 5:07 am

    On `.headerpost` you have a border and on `.contentpost` you don’t, that’s why the former is a little bit wider. You can fix this by removing `width: 100%` form `.headerpost`. That might fix the gaps too. The layout is to weird for me to do more testing there.

    # April 19, 2013 at 7:18 am

    thank you CrocoDillon , it works …

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

You must be logged in to reply to this topic.

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