XHTML / CSS help?
- by Chris Leah
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>
