Question

I am going nuts with a whitespace problem inside a div. Two of my divs have unexplained whitespace but a third similar one has none. When I use the compatability mode of IE8 the whitespace disappears so I am guessing it is something to do with the CSS but for the life of me I can’t seem to see what.

The page causing the issue is at http://www.infinitedreamers.co.uk/blog/

I have made one of the divs background white to show what I mean.

The snippet of the page is as follows:

<div id="id_front_main">

  <div id="id_front_top">

   <div id="id_front_top_title">
    <h2>Latest Gallery Images</h2>
   </div><!--#id_front_top_title-->

   <table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
   <div id="id_front_top_meta">
   </div>

  </div><!--#id_front_top-->

  <div id="id_front_main_holder">

   <div id="id_front_left">
    <div id="id_front_left_title">
     <h2>3d Art Latest</h2>
    </div><!--#id_front_left_title-->

    <div class="id_latest_posts">
                <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=1">Getting Started in 3d Art for free</a></h3>
      <span>
      <p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
      </span>
         </div><!--id_latest_posts-->

    <div id="id_front_left_meta">
    </div>
   </div><!--#id_front_left-->

   <div id="id_front_right">
    <div id="id_front_right_title">
     <h2>Software Latest</h2>
    </div><!--#id_front_right_title-->

    <div class="id_latest_posts">
                <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=87">Poser Files Database</a></h3>
      <p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
           <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=82">File Renamer</a></h3>
      <p>FileRenamer is a simple batch file renaming utility.</p>
           <h3><a href="http://www.infinitedreamers.co.uk/blog/?p=80">Database Documenter</a></h3>
      <p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
         </div><!--id_latest_posts-->

    <div id="id_front_right_meta">
    </div>
   </div><!--#id_front_right-->

  </div><!--#id_front_main_holder-->
 </div><!--#id_front_main-->


    <div class="clear"></div>

The CSS that applies is as follows:

#id_front_main
{
 text-align: center;
 width: 100%;
} 
#id_front_top
{
 width: 100%;
 background: url(images/fcover.jpg);
 background-repeat: repeat-y;

} 
#id_front_top_title
{
 width: 100%;
 background: url(images/ftop.jpg);
 background-repeat: no-repeat;
 height: 70px;
}
#id_front_top_meta
{
 background: url(images/fmeta.jpg);
 height: 31px;
 padding-top: 4px;
}
#id_front_main_holder
{
 width: 100%;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}
#id_front_left
{
 width: 45%;
 float: left; 
 /*background: url(images/flcover.jpg);
 background-repeat: repeat-y;*/
 background: white;
 margin-bottom: 5px;
 margin-top: 10px;
 padding: 0 0 0 0;
} 
#id_front_right
{
 width: 45%;
 float: right; 
 background: url(images/flcover.jpg);
 background-repeat: repeat-y;
 margin-bottom: 5px;
 margin-top: 10px;
 padding: 0 0 0 0;
} 
#id_front_left_title, #id_front_right_title
{
 width: 100%;
 background: url(images/fltop.jpg);
 background-repeat: no-repeat;
 height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
 background: url(images/flmeta.jpg);
 height: 31px;
 padding-top: 4px;
}

#id_front_main h2, #id_front_left h2, #id_front_right h2 
{
 background: transparent;
 font: 24px Georgia,century gothic, Arial, sans-serif;
 font-weight:normal;
 padding-top: 10px;
 padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
 padding: 0 10px 0 10px;
 text-align: left;
}

James 🙂

Answer 1

The whitespace is caused by the top-margin of the h2 in the boxes. To solve it:

#id_front_main h2, #id_front_left h2, #id_front_right h2 {
    ...
    margin-top: 0;
}

It is always a good idea to reset the styles you are using to avoid these kind of problems when looking at your site in different browsers. There are standard reset style-sheets that can help you with that like:

http://meyerweb.com/eric/tools/css/reset/