Basically on GunChester my project I have an few pixel wide gap between #login_top (top image holder) and the 3 CSS col's below, #login_left, #login_centre and #login_right so that my first question why? and how can I fix this, this is in FF, Chrome and IE. Secondly the BG image seems to be overlaying twice as in its stretched at the top then the full picture does display as it should. I did have it working but when trying to fix the pixel gap I must of messed something up but no idea what, so it is now going pear shape, lease help with both these situations :)?
Css below:
@charset "utf-8";
/*
Autoher: Chris Leah
Date: 20/04/2010
(C) GunChester.net / Chris Leah
HTML and Body CSS */
html, body {
background-image: url(../images/home/bg.png);
background-repeat: repeat-x;
background-color: #070a12;
text-align: center; /* for IE */
font-family: Verdana, Tahoma, Arial, sans-serif, Helvetica;
}
/* Wrapper
div */
#wrapper {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
height: auto;
width: 932px;
margin-top:100px;
}
/* Logo
div inside wrapper
div */
#wrapper #logo {
position: relative;
height: auto;
width: auto;
text-align: center;
}
/* Wrapper login top
div */
#wrapper #login_top {
position: relative;
height: auto;
width: auto;
float: left;
}
/* Wrapper login left
div */
#wrapper #login_left {
float: left;
width: 259px;
position: relative;
}
/* Wrapper login centre
div */
#wrapper #login_centre {
height: 152px;
width: 385px;
float: left;
background-color: #181F37;
background-image: url(../images/home/login_area.png);
}
/* Wrapper login right
div */
#wrapper #login_right {
float: right;
width: 277px;
position: relative;
margin-right: 11px;
}
HTML for page below...
<!DOCTYPE html>
<html>
<head>
<!-- Meta Info -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Page title -->
<title>GunChester - Free Online Gangster RPG!</title>
<!-- Link in CSS and JS files -->
<link href="../css/home.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Content wrapper
div layer -->
<div id="wrapper">
<!-- Logo
div layer -->
<div id="logo">
<img src="../images/home/header.png" width="799" height="256" />
</div>
<!-- Login top image
div layer -->
<div id="login_top">
<img src="../images/home/login_top.png" width="932" height="68" alt="Login Box Top Image" />
</div>
<div id="login_left">
<img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" />
</div>
<!-- Login centre
div layer -->
<div id="login_centre">
test
</div>
<!-- Login right image
div layer -->
<div id="login_right">
<img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" />
</div>
</div>
</body>
</html>
