My CSS CODE :
body
{
padding:0;
margin:10px auto;
width:800px;
}
.wrapper
{
width:800px;
background-color:#0099FF;
}
.bannercont
{
margin-top:5px;
height:90px;
width:800px;
}
.banner
{
position:relative;
top:20px;
background-image:url(../images/livesupport.png);
width:267px;
height:32px;
}
My HTML:
<html>
<head>
<link href="../css/iestyle.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../js/jquery.js"></script>
<script language="javascript" src="../js/jquery.corners.js"></script>
<script>
$(document).ready( function(){
//$('.banner').corners("30px transparent top");
});
</script>
</head>
<body>
<div class="wrapper">
<div class="bannercont"><div class="banner"></div></div>
</div>
</body>
</html>
The banner is displaying centred in firefox and left aligned in Internet Explorer. I need it centered. Please help me