Text Input Box Can Only Be Selected By Clicking Bottom Edge

HTML & CSS
1

I am working on a new site which includes some text input boxes within a form. Two of the three boxes are working fine, however one box can only be selected/focused by clicking on the very bottom of the box; what seems to be two pixels of space that will let me click to input the text.

Here is the full code for the page http://pastebin.com/ckpDchrZ (The input boxes are towards the bottom, the top part of the body is another page that gets displayed after the form is submitted.) I will even give you the site itself: zor.me (it’s a link shortening service, obviously the layout is in the beginning stages of customization)


		<p><label>Custom URL (Optional):<input type="text" name="keyword" size="46.5"height="35px" /></label></p>
		
		<p><label>Title (Optional): <input type="text" name="title" size="46.5"
		 /></label></p>

The Custom url (name=“keyword”) field is the problem text input box. The title field is working properly, but I can’t find the error in my code that is causing the other field to not work properly; from what I can see the code is the same for both.

Any help with this issue is greatly appreciated, and if you need more information just let me know!

2

You have an extra closing </div> tag in your code that is messing things up:

<div id="buttonclick" style="width: 73px; height: 35px"  ><img src="images/buttonclick.png" width="73px" height="35px" onclick="submitform()" style="cursor: hand" />	 </div>
		
		 [COLOR="#FF0000"]</div>[/COLOR]

Remove that and you’ll be OK, except that you should also remove the height on the #searchbox div, which appears in two places:

#searchbox{
  background-repeat:no-repeat;
  padding-left:10px;
  width: 501px; [COLOR="#FF0000"]height: 37px;[/COLOR] 
  position: relative;

  
}

and

<div id="searchbox" style="
width: 501px;
[COLOR="#FF0000"]height: 37px;[/COLOR]
background: #fff url(images/searchbox.png) no-repeat center scroll" [COLOR="#0000FF"]display="block"[/COLOR] >

The #searchbox idv is meant to wrap around the whole form, so you don’t want that height set on it.

Also, the code in blue above is invalid. Just remove it, as a div displays as a block anyway.

3

Thank you so much. A simple remove of that </div> fixed things. In my experience it is almost always something simple like that; it just takes another set of eyes to pick it out when you can not.

I know there is a lot of code to be cleaned. I went through all sorts of things in my troubleshooting of various issues; I haven’t publicly released the site yet, so I am not concerned. When I do I will surely have the code all fixed up! I just want things to display correct at this point, I will take out any other code once I have the layout nearly complete.

Thanks again, ralph.m!

4

Just for reference, removing the height from the code within that searchbox div code (in the attribute itself not the header CSS) did break my code. It is probably my fault for not coding to standards properly to begin with but I am porting a script to my own UI and piecing bits together for other design elements, so it would have been a more proper design if I started from scratch.

5

Yeah, I just said to remove the height because it was stopping the container with the border from wrapping around the form.