IE 8 Overflow on Pages with Dynamic Content

jasonmark
jasonmark used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
It's displayed properly on IE8 as well!
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
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.

Author

Commented:
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?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
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?

Author

Commented:
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.
Consultant & Challenge Subduer
Top Expert 2009
Commented:
You're welcome.

It looks like it needs to go at the end of the success function inside the loadActionCenterData function, like this:
        function loadActionCenterData() {
            $.ajax({ type: "POST", url: "PriorityActionCenter.aspx/getActionCenterData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d == 'ERROR') {
                        alert('Error creating activity.', false);
                    } else {
                        // remove the actionItem from the DOM
                        //handleSuccessfulAjaxCall(actionItemSaveButton, nActivityType);
                        $('#tabs-Calls').html(data.d[0]);
                        $('#tabs-Notes').html(data.d[1]);
                        $('#tabs-PopBys').html(data.d[2]);

                        var arrstrNums = data.d[3].split(",");

                        $('#callsCount').html(arrstrNums[0]);
                        $('#notesCount').html(arrstrNums[1]);
                        $('#popbysCount').html(arrstrNums[2]);

                        // fix for IE8 rendering bug:
                        $('#article').css('height','100%');
                    }
                },
                error: function (xhr, msg, error) {
                    displayActivityErrorMsg('Unable to save activity.', false);
                }
            });
        }

Open in new window

Author

Commented:
That worked Kravimir - thank you so much :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial