XHTML / CSS issue with pixel gap [closed]
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>
The space below the top image is the distance between the base line and the bottom of the text line where the image is. As images are inline elements, they are treated as text. You can come around this by simply making the image a block element:
#login_top img { display: block; }
You have set the background image both on the html element and body element. The floating elements below the top image doesn't affect the size of the body, so the body element only covers part of the page. The result is that the body element repeats part of the image, but offset by it's margin (and the margin of the wrapper, as it collapses outside the body element). Remove the background from the body element so that only the html element shows it.
To fix the first problem please try. (Just tested with FireBug).
#login_top { height:68px; }
#login_top img {vertical-align:bottom;}
Images default to vertical-align: baseline which leaves room for letter descenders (p, q, ect) in text.
加载中,请稍侯......
精彩评论