Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website.
When the class is active, specific actions occur; when it's inactive, these actions do not take place. Javascript handles the application and removal of the class. Here is an example of the relevant CSS:
.rightSide { display:none; }
.showCommentsRight .rightSide { display:block; width:50%; }
.showCommentsRight .leftSide { display:block; width:50%; }
And the corresponding HTML structure:
<body class="showCommentsRight">
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
</body>
Simplified for clarity but the concept remains the same. The entire page adjusts its layout (concealing the right side in three different sections) based on the body flag. This functionality functions correctly in Firefox and IE8 but encounters issues in IE8 compatibility mode. Interestingly, upon refreshing the page, the displayed section's right side can vary. At times, only the top section displays the right side while at others, it's the middle one.
I have attempted:
- Validating the HTML for any errors
- Verifying the correctness of my CSS code structure
- Ensuring that my IE7 hack sheet isn't causing interference
- Applying the flag class to a non-body wrapper element (still resulting in the same erratic behavior)
Consequently, my questions are:
- Is there a method to ensure consistent behavior in this scenario?
- Under what circumstances does IE7 decide to reapply styles?
Appreciate insights from everyone.