Avatar of jasonmark
jasonmark
 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="Search"><a href="AdvancedFind.aspx">Advanced Search</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
CSSHTMLWeb Browsers

Avatar of undefined
Last Comment
jasonmark

8/22/2022 - Mon
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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
jasonmark

ASKER
That worked Kravimir - thank you so much :)
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.