My divs are positioned using the following CSS:
position:absolute;
width:100px;
margin:-20px 420px;
Another similar div is also present, and while it appears correctly in Chrome and Firefox, there is a displacement issue in IE7. How can I ensure that these divs look perfect in all browsers? Thank you.
.button {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/portfolio.gif) no-repeat 0 -49px;
margin:-50px 420px;
}
.button a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/portfolio.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button a:hover {
background-position: 0 50px;
}
.button1 {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/design-brief.gif) no-repeat 0 -49px;
margin:-20px 420px;
}
.button1 a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/design-brief.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button1 a:hover {
background-position: 0 50px;
}
These two buttons (button and button1) are contained within this div alongside some text:
.cont
{
position:relative;
width:1400px;
height:500px;
}