How come my form input sometimes moves when I refresh the page?_问答_开发者

How come my form input sometimes moves when I refresh the page?

开发者 https://www.devze.com 2022-12-26 16:42 出处：网络

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 o

相关专题：css forms

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: 开发者_StackOverflow社区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;
}

Try closing your BODY and HTML tags? Also, doctype "htmls"?