troubleshooting Question

IE 8 Overflow on Pages with Dynamic Content

Avatar of jasonmark
jasonmark asked on
CSSHTMLWeb Browsers
7 Comments1 Solution656 ViewsLast Modified:
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
ASKER CERTIFIED SOLUTION
David S.
Consultant & Challenge Subduer
Join our community to see this answer!
Unlock 1 Answer and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros