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/