Objects change position after JS css modification

HTML & CSS
1

Hello,

I have a site with textbox and submit button. Every time when im trying to type into textbox, submit button moves a bit downwards. I assume that it is because of Javascript changing font size in the textbox, but i have no idea how to fix that issue. I would be happy if someone would help me.
Example can be found here: http://maksim.no-ip.org/kust/

Regards,
Max

2

Hi Brog. Welcome to the forums. :slight_smile:

The problem seems to be the change in font size on focus, so you could just remove this line in red from your script:

function SetValue(val) {
	if (val == 'off' && document.getElementById("box").value == ''){
		document.getElementById("box").style.fontStyle="italic";
		[COLOR="#0000CD"]document.getElementById("box").style.fontSize="small";[/COLOR]
		document.getElementById("box").value = "Type text here!";
	}
	else if (val == 'on' && document.getElementById("box").value == "Type text here!"){
		document.getElementById("box").value = '';
		document.getElementById("box").style.fontStyle="normal";
		[COLOR="#FF0000"]document.getElementById("box").style.fontSize="18px";[/COLOR]
	}
}

The alternative is to make the value in the blue line the same as that in the red line. That is, change “small” to “18px” or change “18px” to “small”.

3

Thank you for the answer. But if I’ll change value “small” to “18px” or vice versa, then in this case after moving off from the textbox and leaving it empty, text “type text here” appears to be bigger than the content which im typing in and before that. Point of this textbox is that “Type text here!” should be in italic and some px smaller than user typed text.

4

I’d let go of that desire and just use something like:

<script type="text/javascript">
function SetValue(val) {
	if (val == 'off' && document.getElementById("box").value == ''){
		document.getElementById("box").style.fontStyle="italic";
		document.getElementById("box").style.fontSize="12px";
		document.getElementById("box").value = "Type text here!";
	}
	else if (val == 'on' && document.getElementById("box").value == "Type text here!"){
		document.getElementById("box").value = '';
		document.getElementById("box").style.fontStyle="normal";
		document.getElementById("box").style.fontSize="[COLOR="#FF0000"]12px[/COLOR]";
	}
	
}
 </script>
5

Those lines doesnt make sense then anymore, because i could just set static font size in CSS and thats it. If there is no other way, then I assume that it should be done with positioning or float properties.

6

Hi,

This should stop the jump.


input#box{vertical-align:top}

(At least it does in Firefox via firebug)

7

When I added this line, my textbox started jumping, so I added this property to both objects and now they are staying where they are. Thank you for your help! :slight_smile:

8

Glad it worked:)