Although almost nobody supports IE6 anymore, I’ve been given the task to design an IE6-compatible webpage.
Here’s the code:
<body style="background-color: #ccccdd;">
<form id="form1" runat="server"
style="margin: 0px 80px 0px 80px;
background-color: #f1f1f1;">
<div id="divPage" style="width: 100%">
<div id="divSelectOption" runat="server">
<div id="divInstruct" style="float: left;
position: relative;
display: inline-block;">
Select your gender:
</div>
<div style="margin-left: 10px;
display: inline-block;">
<asp:RadioButton ID="rbFemale" runat="server" style="display: block;"
Text="Female" GroupName="grpGender" Checked="true" />
<asp:RadioButton ID="rbMale" runat="server" style="display: block;"
Text="Male" GroupName="grpGender" />
</div>
</div>
</div>
</form>
</body>
Here’s the problem:
If an IE6 browser opens the page (whether maximized or restored (meaning when the window only covers part of the screen)), all is displayed normally.
However, if the page is loaded when the browser is maximized, and then the user minimizes it, divInstruct gets pushed all the way to the right side of the window.
I apologize in advance if you feel that supporting IE6 is a waste of time, but these are the clients’ demands.
I’d appreciate any help.
UPDATE: When I remove width: 100% from divPage‘s style attribute, the above problem is gone; however, this causes the margin attribute of form1 to stop working. (Only in IE6!)
I’d suggest checking your external css files carefully, if an invalid selector is passed into IE6, it ignores everything after it.
Also, ensure you’re applying a css reset so you’re starting from the same css state in each browser.
This doesn’t feel like a typical IE6 problem to me. It feels like a coding problem that IE6 isn’t able to resolve with the grace of its younger browser cousins.