What if you need the float: left? I have a divless form field that the same thing is happening. Driving me nuts because If I delete the float, it messes up everything.
It's clearly a bug in IE6, but since Microsoft has released IE7 and is now working on IE8, my guess is they won't fix the old browser.
There's just something about the combination of the table cell, the spans, and the float that gives IE6 a headache.
The maddening thing about it is, as I'm sure you want to scream by now, there's nothing wrong with the HTML. So it's not really a question of "fixing" your code. You just have to tweak it to break the mysterious alignment of elements that causes IE6 to freak.
In my case, the input elements were in individual table cells, so the "float:left" wasn't providing any benefit -- enclosed in their own cell, there wasn't anything else to "float" around.
I'm guessing by your description that you must float your element left because there are other things in the table cell. It's been a while, so I can't remember what other things I tried and what might've succeeded or failed. Are you able to change your spans' display to hidden instead of none? Are you able to wrap the contents of the table cell (or just your input element) in a div or span, and float that left instead?
It's frustrating as all get-out, because without knowing the cause (it's not buggy HTML, just some rendering bug internal to IE6), it's hard to suggest a sure-fire solution. Believe me, I know; I've been there. Unfortunately, there's not much I can suggest except to keep trying things until it works. :-/
12 September, 2008 14:33
Yeah, here's one that took a while to track down.
If you are able, check out this HTML in IE6:
<table><tr><td>
<span style="color:Red;display:none;">Please enter valid date</span>
<span style="color:Red;display:none;">Please select a Month.</span>
<select style="float:left">
<option value="0">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</td></tr></table>
This is a much-stripped-down segment of a web page I'm working on, generated by ASP.Net. It is generated by two standard ASP.Net validators (one Custom and one Required) set to Display="Dynamic" and a standard ASP.Net DropDownList inside a standard, run-of-the-mill HTML table cell, with an element from an included stylesheet thrown on. [Image] What you will see is a select box, with the last bunch of bytes from the list of options displayed below it. This text cannot be clicked or selected, the IE Developer Toolbar disavows any knowledge of its existence, and it's obviously not in the source as plain text. The text does appear in the select box where it's supposed to be; there's just a duplicate, unexplained copy on the screen. The amount of text displayed varies from select box to select box -- there is another that is in an AJAX UpdatePanel that loads a very long list of names that only displays the very last character from the very last option.
This appears just fine in IE7, Firefox, and Opera (and probably most others).
What I found, as I was systematically stripping styles and other elements off of the page, is this only seems to occur when there are two validators both with Display="Dynamic" (rendered as "display:none" in the span styles), and only in a table cell. Remove either validator or change its Display property to Static or None makes it go away.
Of course, removing validators or changing their display wasn't going to be the answer -- there are too many pages and too many different ways validators are drawn and used to alter. But as I was going through the stylesheet, I found this block of code:
INPUT, SELECT, TEXTAREA {
font: 11px Verdana, Arial, sans-serif;
float: left;
}
I commented out the "float:left", and sure enough, the problem went away. You can try it yourself by either removing the "float:left" on the SELECT tag, or changing it to "float:none".
Why are we floating all input elements left? I'm about to find out, but considering just about everything is in a div or table cell, I'm guessing (and hoping) this style element can be removed safely...
posted by Yakko Warner at 11:18 AM on Nov 21, 2007
2 Comments
Close this window Jump to comment formWhat if you need the float: left? I have a divless form field that the same thing is happening. Driving me nuts because If I delete the float, it messes up everything.
12 September, 2008 14:04
Then, unfortunately, I think you're screwed.
It's clearly a bug in IE6, but since Microsoft has released IE7 and is now working on IE8, my guess is they won't fix the old browser.
There's just something about the combination of the table cell, the spans, and the float that gives IE6 a headache.
The maddening thing about it is, as I'm sure you want to scream by now, there's nothing wrong with the HTML. So it's not really a question of "fixing" your code. You just have to tweak it to break the mysterious alignment of elements that causes IE6 to freak.
In my case, the input elements were in individual table cells, so the "float:left" wasn't providing any benefit -- enclosed in their own cell, there wasn't anything else to "float" around.
I'm guessing by your description that you must float your element left because there are other things in the table cell. It's been a while, so I can't remember what other things I tried and what might've succeeded or failed. Are you able to change your spans' display to hidden instead of none? Are you able to wrap the contents of the table cell (or just your input element) in a div or span, and float that left instead?
It's frustrating as all get-out, because without knowing the cause (it's not buggy HTML, just some rendering bug internal to IE6), it's hard to suggest a sure-fire solution. Believe me, I know; I've been there. Unfortunately, there's not much I can suggest except to keep trying things until it works. :-/
12 September, 2008 14:33