DIV is not positioned properly in IE7

[sivarm4u]

Greet to All,

I have designed a web page, where I am using a DIV tag and positioning the same. It is appearing fine in IE8, IE9, Mozilla Fireforx and Chrome,

But in IE7, An issue comes up. The same DIV is appearing way beyond the page width and getting the Horizontal scroll bar for the page.

Here is how I am implementing:

CSS
------------------------------------
#CaseLinkList {
position:absolute;
left:784px;
top:6px;
text-align:left;
width:167px;
height:250px;
z-index:1;
}

.lastQuickLinkTab{
background:url(../image/headers/lastQuickLinkTab.png) no-repeat;
width:151px;
height:28px;
padding-left:5px;
font-family:verdana;
font-size:10px;
color:#555555;
font-weight:bold;
}

#CLmenuSection{
width:187px;
height:250px;
z-index:1;
overflow-x:auto;
border-bottom:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
}



HTML
------------------------------------

<div style="position: absolute;">
        <div id="CaseLinkList" style="display:block;">
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td class="lastQuickLinkTab" onclick='ShowList();' id='lastLinkSelected'>Arrearage</td>
          </tr>
          <tr>
           <td><div id="CLmenuSection" style="display:none;">
             <ul class="userinfo" id="liCaseLinks">
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Alert History</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">ARM Schedule</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Arrearage</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Borrower</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Debt</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Equity Analysis</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Escrow</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Follow-Up History</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Loan</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Loan Balances</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Loan Information</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Note</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Order</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Party Management</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Payoff History</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Processor Management</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Proof of Claim</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Property</a></li>
              <li onclick="return HideList(this);"><a href="javascript:void(0);">Reinstatement History</a></li>
             </ul>
            </div></td>
          </tr>
         </table>
        </div>
       </div>

Please Help.

[Paul_o_b]

Hi,

The code above looks the same to me so you must have something else going on that is not shown.

I'm guesisng that the problem is that you have a parent element that is set to text-align:center and that would affect the position of that first absolute element in ie6 and 7.

<div style="position: absolute;">

As you have provided no co-ordinates then its up to the browsers to decide the position and if the text has been centred via a parent element then Ie will center the absolute element also.

Add left:0 to the above rule and it may solve your problem.