Web Analytics Made Easy -
StatCounter CSS form has text input problem - CodingForum

Announcement

Collapse
No announcement yet.

CSS form has text input problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS form has text input problem

    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;
    }
Working...
X