bizarre IE8 input bug

[cloud09]

I have an input that renders completely weird in IE8 - the issue fixes itself however as soon as you enter something into the input. The input is not floated. When the page loads, the entire input, except the actually text in the input are moved down and right by the amount of padding on the top and left, 4px. The bottom margin is also increased by 4px. As soon as I edit the value of the input, the box returns to its correct position. This occurs in no other browser (even IE7) and is not due to js. If needed I'll include the source code, but I've looked it over numerous times and couldn't find any errors.

Edit: with js, if the input is returned to its default value, the position also returns to its messed up state...:/

[scrappedcola]

Some code would help. It's possible if you have any floated elements before or after it might cause it to draw weird. Also if it is contained in a table without position:fixed set it might cause a repaint which might fix your layout.

[cloud09]

Here is the code (this is only part of the page):

<div class="content">
				<form id="new_event" method="post" action="/adam bomb mma 2/base.php?pid=m">
					<input name="name" type="text" maxlength="70" value="Name" style="width:240px"/>
					<input name="promoter" type="text" maxlength="35" value="Promoter" style="width:200px"/><br/>
					<input name="venue" type="text" maxlength="35" value="Venue" style="width:203px"/>
					<input name="city" type="text" maxlength="25" value="City" style="width:168px"/>
					<input name="state" type="text" maxlength="2" value="State" style="width:50px"/><br/>
					<select name="month">
//All these are dynamically generated and I forgot to reset the loop counter...
						<option value="13">January</option>
<option value="14">February</option>
<option value="15">March</option>
<option value="16">April</option>
<option value="17">May</option>
<option value="18">June</option>
<option value="19">July</option>
<option value="20">August</option>
<option value="21">September</option>
<option value="22">October</option>
<option value="23">November</option>
<option value="24">December</option>

					</select>
					<select name="day">
						<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>

					</select>
					<input name="year" class="num_only" type="text" maxlength="4" id="year" value="Year" style="width:50px"/><span class="label">at</span>
					<input name="hour" type="text" class="num_only" maxlength="2" value="Hour" style="width:45px"/><span class="label">:</span>
					<input name="min" type="text" class="num_only" maxlength="2" value="Min" style="width:45px"/>
					<select name="time">
						<option value="am">AM</option>
						<option value="pm">PM</option>
					</select><br/>
					<textarea name="desc">Description/Comments</textarea>
					<table id="bouts" cellspacing="1px" cellpadding="4px">
						<tbody>
							<tr>
								<td>Bout #</td>
								<td>Fighters</td>
								<td>MMA ID/Birth Date</td>
								<td>Winner</td>
								<td>Weight</td>
								<td>Info</td>
							</tr>

And here is some css:

nput {
	font-size: 1.6em;
	color: #333;
	border: 1px #a00 solid;
	padding: 4px;
	margin: 3px 2px;
}
select {
	font-size: 16px;
	color: #333;
	padding: 3px;
	border: 1px #a00 solid;
	margin: 3px 2px;
}
.label {
	color: white;
	font-size: 17px;
	padding: 4px;
	padding-right: 2px;
}
textarea {
	width: 457px;
	margin: 2px;
	padding: 4px;
	height: 70px;
	font: 14px Verdana, Helvetica;
	color: #333;
	border: 1px #c00 solid;
}
#bouts {
	width: 100%;
	border: 1px #c00 solid;
	font-size: 11px;
	color: #fc0;
	margin: 2px;
}

[fxm]

The described behavior in IE8 isn't seen here with the code provided (although I may not have stumbled on the <input> that causes the problem. What DOCTYPE are you using?

[cloud09]

I'm using XHTML 1.0 transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> EDIT: IE has now officially baffled me. The bug is gone. I have no idea how. I went to bed, the bug was there, I wake up, turn on the computer and it is gone. It wasn't even shutdown.

[cemsal]

Hi, I'm facing the same error. I hope to wake up tomorrow and discover the bug is gone, but I don't think really that happens.
I guess it's something related to have width specified for the input field. I can't say more now.... I hope someone can help me!

[Wagaweze]

Runing this dirty jQuery function fixed my issue.
Not sure why IE8 is so annoying.

$(document).ready( function () {
    if ($.browser.msie && $.browser.version == '8.0')
        $(".TextBox").each(function() {$(this).width($(this).width()+1);});
});