Topic: HTML and PHP making input text field invisible

[con]

The problem I am having is that when I type something into the input text box for the verification code, its white, same as the back ground, but that's not set anywhere. It still types, you can see it if you highlight it.

If I move the input box out of the div it works fine.
Here is a working example of what I am talking about.
http://www.houseofspeed.com.au/coz/verify/contactus.html

Here is the CSS code for it as well.

Code: [Select]

#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#7a7a7a;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:5px 0; width:100px; padding:5px 0; font:bold 12px Arial, Helvetica, sans-serif; color:#747474; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform label span.red { font:normal 12px Arial, Helvetica, sans-serif; color:#ff0000; }
#contactform input.text { width:400px; border:1px solid #cecece; margin:5px 0; padding:5px 2px; height:16px; background:#f5f5f5;}
#contactform textarea { width:400px; border:1px solid #cecece; margin:10px 0; padding:2px; background:#f5f5f5; height:150px;}
#contactform li.buttons input { padding:3px 0; float:right; margin-right:5px; border:0; color:#FFF;}
#verify { padding:0px 0; float:left; margin:5px 0 0 100px; border:0; color:#FFF; background: #f1f1f1 url(../images/verify_bg.png) top left no-repeat; width:270px; height:36px;}
#refresh { padding:0 0px 0 0; float:right; border:0; color:#f1f1f1; width:175px;}
#verify_input { padding:0 10px 0 0; float:right; border:0; color:#f1f1f1;}
Any help would be greatly appreciated.

[haku]

Try this:

Code: [Select]

#verify_input { padding:0 10px 0 0; float:right; border:0; color:#000;}

[con]

Try this:

Code: [Select]

#verify_input { padding:0 10px 0 0; float:right; border:0; color:#000;}

I have tried that. It also doesn't work.

If I move that <div id="verify_input"> outside of the <ol> is works fine, it's just not where I want the input box.
Check out the link again to see what I mean. http://www.houseofspeed.com.au/coz/contactus.html

Code: [Select]

      <form action="check.php" method="post" id="contactform" onSubmit="return ValidateForm(this)">
        <ol>
          <li>
            <label for="name">First Name <span class="red">*</span></label>
            <input id="name" name="name" class="text" />
          </li>
          <li>
            <label for="email">Your email <span class="red">*</span></label>
            <input id="email" name="email" class="text" />
          </li>
          <li>
            <label for="company">Company</label>
            <input id="company" name="company" class="text" />
          </li>
          <li>
            <label for="subject">Subject</label>
            <input id="subject" name="subject" class="text" />
          </li>
          <li>
            <label for="message">Message <span class="red">*</span></label>
            <textarea id="message" name="message" rows="6" cols="50"></textarea>
          </li>
          <li class="buttons">
            <div id="verify"><img border="0" id="captcha" src="image.php" alt="" width="86" height="36">
          <div id="refresh"><a href="JavaScript: new_captcha();"><img border="0" alt="" src="images/refresh1.png" align="center"></a>
          </div>
          </div>
          <input type="image" name="submit" src="images/send.gif" class="send" style="color:#000;" />
            <div class="clr"></div>
          </li>
        </ol><div id="verify_input"><input type="text" name="security_code" value="" size="14"></div>
      </form>

[haku]

Not sure what you mean - the text appears just fine for me.

[con]

It works fine now because the div is outside of the <ol>

I am going to try a few more things but any suggestions are more than welcome.

[con]

I tried a few more things and it worked fine. There was a conflict between;

Code: [Select]

#contactform li.buttons input { padding:3px 0; float:right; margin-right:5px; border:0; color:#FFF;}
and

Code: [Select]

#verify_input { padding:0 10px 0 0; float:right; border:0;}

The colour was actually set on the input in the top line to #FFF  I should have notice that, I set it to #000 and it worked fine.
I do have a real question though which I am going to start a new thread for.

Thanks haku for helping me get some fresh eyes on this.