asked on

IE 8 Overflow on Pages with Dynamic Content

I am working on a project and ran into an overflow problem with IE8. When dynamic content is brought into a page it overflows and overlaps the bottom of the page. In IE9, FireFox, Chrome and Safari it shows correctly, but I need it to show properly in IE8 because that is what the majority of our clients use.

Here is a link to the test area:
PriorityActionCenter

To access this area you can use:
Username: kevins
Password: !kevins@#

PS I have been using IE Tester to view my attempts to fix this.

Here is the code:

Master page:

<div id="maincontent">
<div id="content">

<div class="clear"></div>

<div class="NavLink">
<ul id="sidenav">
<li class="snlnk" id="PriorityActionCenter"><a href="PriorityActionCenter.aspx">Priority Action Center</a></li>
<li class="snlnk" id="Sort"><a href="ContactSort.aspx">Sort Relationships</a></li>
<li class="snlnk" id="Group"><a href="Groups.aspx">Manage Groups</a></li>

<li class="snlnk" id="ImportRelationships"><a href="ImportContacts1.aspx">Import Relationships</a></li>
<li class="snlnk" id="ImportLeads"><a href="ImportLeads1.aspx">Import Lead List</a></li>
<li class="snlnk" id="WorkLeads"><a href="WorkLeads.aspx">Work Lead List</a></li>
<li class="snlnk" id="SetupWizard"><a href="SetupWizard.aspx">Setup Wizard</a></li>
</ul>
</div>

<div id="article">
<div id="content-tp"></div>
<div id="content-m">
<asp:Contentplaceholder ID="BodyContent" runat="server"></asp:Contentplaceholder>
</div>
<div id="content-bt"></div>
</div>
</div>
</div>

Lastly here is the CSS:

body {
color:#494949;
font-family:'lucida grande', Lucida Sans Unicode, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
margin:0px auto;
background:#d2d1d0;
}

.clear {clear: both;}
.clearall {clear:both; height:30px; display:block;}
.clear10 {clear:both; height:10px; display:block;}
a {color:#275db6; text-decoration:none; border:0px;}
a:hover {color:#094686; text-decoration:none; border:0px;}
a img {border: 0px;}

#container {
width:100%;
margin:0 auto;
height:10px;
}

#maincontent {
clear:both;
width:934px;
margin:0px auto;
padding:0px;
border:3px solid #bbb;
border-top:none;
background:#f4f4f4;
*position:relative;
*top:53px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius:0px 0px 10px 10px;
}

#content, #contentfull, #contentsettings {
margin:0px;
padding:30px 0px;
display:inline-block;
}

#contentfull {width:934px;}

.NavLink {float:left; margin:0; padding:0;}
#sidenav {
margin:15px 0 0 0;
padding:0;
width:227px;
list-style: none;
float:left;
position:relative;
left:40px;
text-align:left;
z-index:9999;
}

#sidenav li {
text-indent:10px;
margin:0;
padding:0px;
list-style:none;
}

#sidenav li a, #sidenav li a:visited {
padding:15px 0 0 0;
margin:0;
display: block;
text-decoration: none;
height:37px;
}
#sidenav li:first-child {background:url(/images/sidenav-tp.gif) no-repeat;}
#sidenav .snlnk {background:url(/images/sidenav-bck.gif) bottom left no-repeat;}
#sidenav .snlnk a {}
ul#sidenav li a:hover {background:url(/images/sidenav-arrow.png) -10px 1px no-repeat;}
#sidenav .snlnksel a {background:url(/images/sidenav-arrow.png) -10px 1px no-repeat;}

#article, #articlemid {
width:630px;
padding:0;
float:right;
z-index:999;
*position:relative;
*right:50px;
text-align:left;
}
#article {margin:0 0 0 30px;}
#articlemid {margin:0 0 0 150px; *left:-150px;}

#content-m {
background:#fff;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
margin:0;
padding:10px;
width:608px;
min-height:550px;
display:inline-block;
}
#content-tp, #content-bt {width:630px; height:12px; margin:0; padding:0; display:block;}
#content-tp {background:url(/images/content-tp.gif) no-repeat;}
#content-bt {background:url(/images/content-bt.gif) no-repeat; margin-top:-6px; *margin-top:0;}

I attached the entire css file below in case that is needed or helpful.
ie8-crm.jpg
ie9-crm.jpg
styles.css

Hagay Mandel

It's displayed properly on IE8 as well!

David S.

I did not see the bug when I tested in IE9's IE8 rendering mode, but do see it when I test in true IE8.

This is the kind of IE8 bug where you have to manually change one of several CSS properties to trigger a reflow/repaint. In this case, I'd recommend setting the height of "#article" to 100% and then, if you want, you can set it back to "auto" via setTimeout().

P.S. You seem to have a few CSS hacks there for IE7 even though you seem to be doing user-agent sniffing to prohibit someone from using your webapp with it.

jasonmark

ASKER

I added the height:100% to the #article. It is still overflowing on IE8 on the Priority Action Center page - could it have something to do with the Quick Ideas tab on the right?

David S.

Where did you make the change? Perhaps it wasn't clear that it needs to be done in the JS function that adds the new content to the page?

jasonmark

ASKER

I made the change in the .css file - guess it needs to be made elsewhere. When looking at the code on the page could u show me where that change needs to be? Currently I am away from the files so will have to try this out next Tuesday morning. Thanks for all your help.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jasonmark

ASKER

That worked Kravimir - thank you so much :)