I'm troubleshooting a search form that uses css for layout -- coded by one of our developers. In mozilla it works fine, but in IE6 the two text input boxes have a pixel jog problem. That is, on mouseover, I get the I-bar only when the cursor approaches the top part of the text input box. I have read about the IE 3 pixel jog bug, but the circumstances (in IE, orizontal 3 pixel jog when using floated divs) do not match my case. My form doesn't use floated divs and the jog is vertical.

I'm pretty sure problem is in the css; if I snip out the positioning divs around the text entry area, problem goes away. I thought perhaps I should redo the layout using floated divs, but before doing that I wanted to know if there is a simpler solution. Can anyone help? Thanks. --Julie Wetherill

Follow this url to the search form:
http://chekhov.harvard.edu:11080/vc/...ection=scarlet

Here is the snippet of relevant form markup:

<p>
<div class="advSrchPositionB">Search for&nbsp;</div>
<div class="advSrchPositionA">
<input type="text" value="" size="20" name="searchterm0">
</div>
<div class="advSrchPositionD ">in</div>
<div class="advSrchPositionE ">
<select name="searchtermindex0

... snipped option list

</select>
</div>
<div class="advSrchPositionB">
<br class="advSrchLineHeight">
<select name="operator1"><option value="and">and</option><option value="or">or</option><option value="not">not</option></select>
</div>
<div class="advSrchPositionA">
<input type="text" value="" size="20" name="searchterm1">
</div>
<div class="advSrchPositionD ">in</div>
<div class="advSrchPositionE ">
<select name="searchtermindex1

... snipped option list

</select>
</div>
</p>

The relevant CSS:

.advSrchPositionA {
margin-left:100px;
margin-top:-20px;
margin-bottom:-1px;
}

.advSrchPositionD {
margin-left:280px;
margin-top:-20px;
margin-bottom:-1px;
}
.advSrchPositionE {
margin-left:308px;
margin-top:-20px;
margin-bottom:-1px;
}