Home/ Questions/Q 736515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T07:36:49+00:00

Basically on GunChester my project I have an few pixel wide gap between #login_top

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0