Me again, with yet another CSS problem
Cant get the spacing on the middle box right in explorer again. The top spacing is being a pain:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Graphic Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="getimages.js"></script>
<script type="text/javascript">
<!--
function check(x){
document.getElementById(x).value=""
if (x == "pass"){
document.getElementById(x).type="password"
}
}
//-->
</script>
</head>
<body>
<div class="header1">
<img src="images/splash.gif" />
</div>
<div class="logo">
<img src="images/logo.gif" />
</div>
<div class="login">
<form action="#" method="post" enctype="multipart/form-data" name="login">
<ul style="list-style:none">
<li>
<div style="border:thin; border-color:#666666; border-style:solid; padding:0px 2px 0px 2px">
<input name="username" id="user" type="text" value="username" size="10" style="border:none; background-color:#000000; color:#CCCCCC" onfocus="check(this.id)"/>
</div>
</li>
<li>
<div style="border:thin; border-color:#666666; border-style:solid; padding:0px 2px 0px 2px">
<input name="password" id="pass" type="text" value="password" size="10" style="border:none; background-color:#000000; color:#CCCCCC" onfocus="check(this.id)"/>
</div>
</li>
<li>
<center>
<a href="#">Login</a> or <a href="#">Register</a>
</center>
</li>
</ul>
</form>
</div>
<div class="content">
<p>Welcome to Graphic Portfolio. Feel free to post any art or photos you think would compete well with the others. Users can compete for votes for a chance to have their piece graduated to this homepage.</p>
<h1>Top Pieces</h1>
<script type="text/javascript">
getimages("top");
</script>
<div id="img"></div>
</div>
</body>
</html>
CSS:
/* CSS Document */
body,td,th {
background-color: #6d95bc;
font-family: Arial;
font-size: 10px;
color: #CCCCCC;
background-image: url(images/head2.gif);
background-repeat: repeat-x;
color: #FFFFFF;
}
a {
color:#0066CC;
}
div.header1{
position: absolute;
top: 0px;
left: 0px;
}
div.logo{
position: absolute;
top: 95px;
left: 10px;
z-index:2;
}
div.login{
position: absolute;
top: 70px;
right:10px;
z-index:2;
}
div.content{
posistion:relative;
margin:200px auto;
top:400px;
width:600px;
text-align:left;
padding:10px;
background-color:#000000;
border:1px solid black;
z-index:3;
}
div.img{
text-align:right;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
linky: http://www.joshuajonah.com/demo1/
and as usual, feel free to leave a crit. on the design and style. I’m trying:)