form looks off in ie7. css help. (screenshot incl.)

Here is the jfiddle: http://jsfiddle.net/sPBtg/1/

In IE7, the input box for the quiz goes down a line and I can't figure out why it's doing that. Here is a screenshot of what I mean:

What do I need to change?

Also, I noticed that in the IE7 developer tool, I get a strange empty text node.开发者_JS百科 If I delete that text node, through the developer tool, everything works right again.

Try pulling the input box out side of the span's. You also only really need one span there to wrap the label text. Try something like:

<p class="quiz-wrap">
<span class="wpcf7-quiz-label">10+10=</span>
<input type="text" class="wpcf7-quiz" name="quiz">
<input type="hidden" value="996f7d842c0e718f50c0d1890f7adb57" name="_wpcf7_quiz_answer_quiz">

   .quiz-wrap {
    float: left;
    margin:0; 
   }

.wpcf7-quiz-label {
    color: #848383;
    float: left;
    font-size: 0.9em;
    line-height: 19px;
}

.quiz-wrap input {
    float: left;
    margin: 0 0 0 5px;
    padding: 3px;
    width: 30px;
}

    input {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #232323;
    border: 1px solid #4D4D4D;
    color: #F5F5F5;
    display: block;
    font-size: 1em;
   }

Is there a specific reason the quiz-wrap was position:relative? I didn't see any actual use for that in your sample so I removed it. You might need to check out the layout tab in the IE developer tools to see if your browser is setting a margin or other offset to the top of your input box as well.