Problem with Margins on a Div looking perfect in firefox but not google chrome ?

  • ianizaguirre

    #8021

    I am trying to position the ribbon on my homepage very close to the top of the post ( the ribbon I created through css so its not a picture)

    It looks perfect in Firefox. But in Google Chrome and Internet explorer it moves from the very top of the page down ( and so does my other divs)

    Here is the css for my ribbon ( 2 parts )

    /* Home Page Square Ribbon SQUARE */

    .ribbonpartone-title h1 {
    background: none repeat scroll 0 0 #565656;
    border-radius: 10px;
    color: #FFFFFF;
    float: left;
    font-family: georgia;
    font-size: 14px;
    font-weight: normal;
    height: 60px;
    line-height: 94px;
    margin-top: -15px;
    margin-left: 307px;
    text-align: center;
    text-transform: uppercase;
    width: 60px;
    }

    /* Home Page Square Ribbon TRIANGLE */

    .ribbonparttwo-title h1 {
    width: 0;
    height: 0;
    border-top: 50px solid #565656;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    background-color: #ffffff ;
    margin-left: 655px;
    margin-top: 37px;
    display: inline;
    padding-top: 16px;
    }

    What am I missing in my code I have been trying for hours to figure this out with no luck using fire bug and Google Chromes Inspect an Element.

    Website: http://pantryliquors2.com/

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.