Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 590
  • Last Modified:

Input box problem - Can't click on it. Margin or css or something

Hey guys.
I have two input boxes  stacked vertically with some JS validation which runs when the input loses focus and also when form submitted.

When submit is clicked the js runs and if the top box errors, an error message is displayed beneath the box. Similarly, if the lower box errors then the error displays beneath the box. If you click on the lower box first and have no data the error is displayed correctly. If you then click the top box and then lose focus with no data the error is displayed. Problem : When you go to click on the lower box again it is unclickable. I have tried to figure out why but i dont really know.

It's as though the actual input box is static on the page, and then if it is shunted downwards by another dom element appearing above it then only the graphic for the input moves down but the actual input area stays in the same location. I think this because if i hover over the input slowly from the bottom to the top then i cant click on the lower box until i reach approx. 15px above the bottom (which it is clickable but only at the very top of the box) The distance is also approximately by how much the input box has shifted downwards. Because it works ok if the boxes do not move around on the screen i am lead to believe it MUST be something to do with its position which is why it is as though only the graphic moves and the real input area stays in the same place.

Has anybody else had any problems like this? I tried to surround the inputs in a <div> but that didnt solve the problem. See attached screenshots. There must be a solution to this!
error.png
0
andoneknight
Asked:
andoneknight
1 Solution
 
s8webCommented:
You'll have to post a link (or the browser output) to troubleshoot this one.
0
 
ludofulopCommented:
please paste your code and styles here, or online link
try to set position and/or z-index for inputs and error messages or check other elements, probably they overlay your input.

sorry, i can't fint exact problem without source code of the middle case
0
 
npcwCommented:
place as clean line between in it instead of Margin
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
andoneknightAuthor Commented:
Please see below. The JS which validates the fields ONLY changes this by adding the text "Please enter name" and that is all, there is no style changes or anything, purely text adding to the field "<span id="number_error">"
<div id="call_back">
	<h2 class="wBorder">Request a callback</h2>Enter your name & phone number below<br />
	<form name="call_back_form" method="post" onsubmit="phone_callback(this); return false;">

		<div id="name_input_div"><input type="text" style="width:120px;" name="callback_name" onblur="validateElement(this,'name_error')" onfocus="inputOnFocus(this)" title="Name" /><br /><span id="name_error"></span></div>

		<div id="number_input_div"><input type="text" style="width:120px;" name="callback_number" onblur="validateElement(this,'number_error')" onfocus="inputOnFocus(this)" title="Number" /><br /><span id="number_error"></span></div>

		<input type="image" id="submit" style="margin-top:10px;" src="<?=images_url()?>submit0.png" class="swapButton imgInput" />
	</form>
</div>


//CSS
#call_back { width:150px; height:100px; float:right; margin:0 15px; clear:both; margin-top:10px;text-align:left; }
#call_back input { border: 1px solid #369; background:transparent; }
#number_input_div { margin-top:10px; }

Open in new window

0
 
andoneknightAuthor Commented:
what do you mean clean line?
0
 
npcwCommented:
remove margin and add the code <br/> between the input boxes
<div id="call_back"> 
        <h2 class="wBorder">Request a callback</h2>Enter your name & phone number below<br /> 
        <form name="call_back_form" method="post" onsubmit="phone_callback(this); return false;"> 
 
                <div id="name_input_div"><input type="text" style="width:120px;" name="callback_name" onblur="validateElement(this,'name_error')" onfocus="inputOnFocus(this)" title="Name" /><br /><span id="name_error"></span></div> 
 
                <div id="number_input_div"><br/><input type="text" style="width:120px;" name="callback_number" onblur="validateElement(this,'number_error')" onfocus="inputOnFocus(this)" title="Number" /><br /><span id="number_error"></span></div> 
 
                <input type="image" id="submit" style="margin-top:10px;" src="<?=images_url()?>submit0.png" class="swapButton imgInput" /> 
        </form> 
</div> 
 
 
//CSS 
#call_back { width:150px; height:100px; float:right; margin:0 15px; clear:both; margin-top:10px;text-align:left; } 
#call_back input { border: 1px solid #369; background:transparent; } 
#number_input_div { margin-top:10px; }   <remove this

Open in new window

0
 
andoneknightAuthor Commented:
This doesnt solve the problem :(. In IE7 I can't even click on either of the boxes. The link to the site is: http://lintel.squaresailing.com/support
anon_user//08Jan10
0
 
npcwCommented:
you are rite
but in ie8 it works fine
and ie8 is now default
 
0
 
andoneknightAuthor Commented:
lol I dont understand what you mean?
http://www.w3schools.com/browsers/browsers_stats.asp
0
 
npcwCommented:
firfox 3.5 same problem as ie7(and lower)
only ie8 shows it correct
did you remove the magrin?
0
 
andoneknightAuthor Commented:
Yep. and put a BR in instead
0
 
npcwCommented:
can i look at your compleate source code?
0
 
andoneknightAuthor Commented:
Sorry have already provided the css and divs that relate to the inputs. The site is on a framework and all the views are split!
0
 
npcwCommented:
that's ok
0
 
andoneknightAuthor Commented:
So ay ideas anyone??
0
 
andoneknightAuthor Commented:
I've solved it - It has to do with both transparency and float. If i remove the float and position the input container absolue or relative it works fine. However in IE7 becasue the background is transparent, it for some reason cant select the input box when u click it.
0
 
npcwCommented:
ok nice
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now