Introduction
I've encountered another one of those strange quirks with Internet Explorer, specifically with IE8. Testing in IE7 poses no problems, but something seems to be causing an issue with IE8.
Below this post, you can find a JSFiddle example that showcases the problem I'm facing.
Overview
The issue revolves around a ul element that expands and contracts content when clicking on the span.content_head. Initially, the content is displayed by default.
<div id="spreadsheet_overview">
<ul class="overview_list">
<li>
<div class="content_head">
<div class="indicator"></div>
Recipe calculation
<div class="summation">
<span class="title">1 tablet cost:</span>
<span class="value">0.09360828</span>
</div>
</div>
<div class="container">Lots of content</div>
</li>
</ul>
</div>
$("div.content_head").click(function(e){
$(this).next(".container").toggle();
$("div.indicator",this).toggleClass("contracted");
});
The Issue at Hand
The problem arises when attempting to contract the content. Let's first take a look at how it appears in Firefox, where it functions correctly.
The document structure includes:
- body - slightly dark gray
- wrapper, bright gray
- dividing column, dark gray
- additional dividers, white
You'll notice that in Firefox, the height adjusts accordingly after contracting the content and removes the vertical scrollbars. The wrapper also adjusts its height as expected.
However, in Internet Explorer 8, the wrapper fails to adjust its height after hiding the content. Why is it not resizing in IE?
Upon inspection, the height remains unchanged even after concealing the content.
If this is a CSS-related issue, which is highly likely, what could be causing it?
Investigating with JSFiddle
Take a look at the JSFiddle link provided to replicate the specific problem I am facing. I have minimized the CSS to focus solely on the elements relevant to this issue.
There might be an error in my CSS/HTML code that's causing this unexpected behavior.
Hopefully, someone can identify the issue that has eluded me...
Clicking on "Recipe calculation" hides the content, yet the height remains static in IE8.
Your assistance is greatly appreciated!
Updates
A user pointed out that toggling the height: auto attribute using developer tools can adjust the wrapper height. Further investigation revealed that resizing the window achieves the same result.