I have a outer div which is working correctly in chrome, firefox but not in IE.. I have some contents inside outer div.. to make it center aligned or middle of page i gave this width:970px; height:630px; to outer div… so that i got the contents at the center in chrome and Mozilla… but in the case of IE 7.. in IE its left aligned..
here is my css….
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin-left: auto;
margin-right: auto;
width:970px;
height:630px;
position:relative;
}
</style>
here is my full code:
<head><title>home</title>
</head><body class='claro'><div class='outer' style="border:1px solid black;">
<div id="dottedBorderhome">
</div>
<div id="dragIconhome">
</div>
<div class="claro" id="menuDiv2" onclick="setWidgetproperty(this.id,'x','navMenu2');" onmousedown="setMenuBarProperty('navMenu2');" onmouseup="setDocStyle(this.id)" style="border: 1px dotted white; left: auto; position: absolute; top: 17px;">
<!-- here one menu bar will come -->
</div>
<div class="claro" id="divlabel43" onclick="setWidgetproperty(this.id,null,'divlabel43')" onmouseup="setDocStyle(this.id)" style="left: 50px; position: absolute; top: 92px; text-align: right; font-family: Times; font-size: 15pt; font-weight: bold;" >
<label id="label43" onclick="setLblProperty(this.id)" onmouseover="editName('divlabel43',this.id,'label')">
Worklist Manager
</label>
</div>
<div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 130px; height:70px; width:150px;">
<!-- here its contains table -->
</div>
<div class="claro" id="divImage2" onclick="setWidgetproperty(this.id,'xy','image2')" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
<img class="images" id="image2" name="Search-icon2.png" onclick="setImgProperty(this.id)" src="images/uploads/Search-icon2.png" style="height: 50px; width: 58px;">
</div>
<div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 640px;">
<!-- here another menu bar -->
</div>
<div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:340px; height: 296px; width: 921px;">
<!-- here another table-->
</div>
</div></body>
As Sven suggested, https://stackoverflow.com/questions/4742877/center-align-div-in-internet-explorer likely holds your answer. Either you’ve got non-valid HTML that is putting IE7 in quirks mode, or you’re missing the doctype.