How come my form input sometimes moves when I refresh the page?
Posted
by samoz
on Stack Overflow
See other posts from Stack Overflow
or by samoz
Published on 2010-04-11T15:28:29Z
Indexed on
2010/04/11
15:33 UTC
Read the original article
Hit count: 271
On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
© Stack Overflow or respective owner
