homepage Welcome to WebmasterWorld Guest from 54.198.9.77
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
DIV is not positioned properly in IE7
sivarm4u




msg:4365783
 9:53 am on Sep 22, 2011 (gmt 0)

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




msg:4365795
 11:06 am on Sep 22, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved