Textboxes move around when go from fullscreen to window screen [Archive]

andynov123

05-24-2011, 06:29 AM

My textboxes and the text above them are moving around when I change windows size in internet explorer and chrome. I dont want it to move at all but stay in upper right corner just like facebook is set up. No matter if you make window fullscreen or smaller window. Heres images of it happening in chrome and internet explorer below.
Also it does validate
Here my html and css

html
<!DOCTYPE HTML>

<head>
<title>WEBSITE NAME</title>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19766501-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="description" content="Your description about your website for search engines.">
<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
<link href="data1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="loginbutton">
<img src="login.jpg" alt="login"/>
</div>
<div id="wrapper">
<div id="header" class="bold txt_center">Registration</div>
<div id="login">
<form>
<p> </p>
<p>

<input type="text" name="firstname" />
r
<input type="password" name="pwd" />
</p>
</form>
</div>
<div id="loginname">Email                                     Password
</div>
<div id="left_column">

</div>

<div id="footer" class="txt_center">
<div class="copyright"><a href="contact.html">Contact U0</a></div>
</div>

</div>
</body>
</html>

CSS

<style type="text
/css">
* {
margin: 0px auto;
padding: 0px;
}
#loginname {
color:#FFF;
position:absolute;
right:215px;
top:30px;
}
#loginbutton {position:absolute; right:45px;top:52px;}
#login {margin-left:450px;margin-top:-50px;
margin-bottom:500px; Margin-top:-200px; text-align:right; position:absolute; right:120px;}
body {
font: 76% Verdana, Arial, Helvetica, sans-serif;
background: #000;
padding-top:120px;
}
#wrapper {
width: 850px; /* Page width */
background: #fff;
padding: 10px;
margin: 10px auto;
}
#header {
font-size: 250%;
margin: 10px;
}
#right_column {
float: right;
width: 590px;
clear: right;
text-align: left;
}
#left_column {
width: 256px;

}
#left_column img {
display: block;
clear: right;
font-size: 10px;
}
#footer {
background: #ccc;
height: 60px;
margin-top: 10px;
}
.copyright {
padding: 20px;

}
p {
margin: 10px 0px;
text-align: center;
font-size: 15pt;
}
h1,h2,h4,h5,h6 {
font-size: 155%;
margin: 20px 0px;
}
.bold {
font-weight: bold;
}
.txt_center {
text-align: center;
}
#left_column {
width: 256px;
float: left;

}
</style>
#wrapper #right_column p {
text-align: left;
}
#wrapper #right_column p {
text-align: center;
}
#wrapper #right_column p {
text-align: left;

text-indent:50px;
}

sunfighter

05-24-2011, 08:44 PM

Your problems are occurring because of how things are placed. Your registration div is first in your coding and forces you to use absolute positioning on other sections of code which breaks on you. Here is a little better script, but it is not finished and uses inline styling.

<html>
<!DOCTYPE HTML>

<head>
<title>WEBSITE NAME</title>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19766501-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta name="description" content="Your description about your website for search engines.">
<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
<link href="data1.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:black; color: white;width: 850px;margin:0 auto;">
<div id="wrapper" style="margin:0 auto;">
<div style="margin-top: 50px;">
<div style="float:right;margin-right: 20px;">
<br>
<input type="image" name="myclicker" src="image.jpg" width="55" height="22"> 
</div>

<div style="float:right;margin-right: 20px;">
Email<br>
<input type="text" name="firstname">
</div>

<div style="float:right;margin-right: 20px;">
Password<br>
<input type="password" name="pwd">
</div>
</div>

<div style="height:120px;"></div> 

<div style="border:solid white 1px;background-color:white;color:black; clear:both;margin:0uto; auto;">
<div style="font-size: 250%;font-weight: bold;text-align: center;">
Registration
</div>
<div style="background: #ccc;height: 30px;margin: 10px; padding-top: 5px; text-align:center;">
<div class="copyright"><a href="contact.html">Contact U0</a></div>
</div>
</div>
<div id="left_column"></div>
</div>
</body>
</html>