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) / 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;
    /*  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>
<!-- 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" />

<!-- Content wrapper div layer -->
<div id="wrapper">
  <!-- Logo div layer -->
  <div id="logo">
    <img src="../images/home/header.png" width="799" height="256" />
  <!-- 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 id="login_left">
    <img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" />
   <!-- Login centre div layer -->
  <div id="login_centre">
  <!-- Login right image div layer -->
  <div id="login_right">
    <img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" />

1 answer

This was chosen as the best answer

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 colapses outside the body element). Remove the background from the body element so that only the html element shows it.

Answered about 8 years ago by Chris Leah