I'm currently facing a frustrating layout issue on our website that only seems to be occurring in IE (versions 7 and 8), while Firefox and Chrome are working perfectly fine. The problem is specifically happening on this particular page:
The issue lies in the positioning of the report images, which should be aligned to the left of the text. We have a simple structure set up with an outer div containing the item, then an inner div floated to the left (resourceleft) and another inner div also floated to the left (resourceright). Both of these inner divs have widths smaller than the outer DIV. Here's a snippet of the code causing trouble:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The CSS relevant to this issue is as follows:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any assistance would be greatly appreciated, as this problem has become quite maddening!
Thank you, Chris.
UPDATE - Problem Solved.
Ah! After some investigation, I've discovered the root cause of the issue - it was related to my responsive linking code and how IE8's Developer Tools displayed rules that weren't actually being applied. The rules were located in the fms-res.css file, but this file is used only for browsers that understand media queries and have a width greater than 980px. IE8 utilizes a default desktop-only file called m-equiv.css, where the necessary rules were missing. The Web Developer Toolbar misleadingly showed these rules as applying from fms-res.css, even though they did not really affect the elements. This effect of Developer Tools is something we often see with print stylesheets (print.css) as well, where rules show up despite not applying unless during printing.
A huge thank you for all the input, even if the solution turned out to be quite trivial in the end.
Cheers!