Неожиданный пробел в DIV

Question

Я схожу с ума с проблемой пробелов внутри div. У двух моих дивов есть необъяснимые пробелы, но у третьего подобного нет. Когда я использую режим совместимости IE8, пропуски исчезают, поэтому я предполагаю, что это как-то связано с CSS, но, судя по всему, не вижу, что.

Страница, вызывающая проблему: http://www.infinitedreamers.co.uk/blog/

Я сделал один из фонов divs белым, чтобы показать, что я имею в виду.

Фрагмент страницы выглядит следующим образом:

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

Применяется следующий CSS:

#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;
}

Джеймс: -)

Answer 1

Пробел вызван верхним полем h2 в полях. Чтобы решить это:

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

Всегда полезно сбросить стили, которые вы используете, чтобы избежать подобных проблем при просмотре вашего сайта в разных браузерах. Существуют стандартные таблицы стилей сброса, которые могут вам помочь, например:

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

Answer 2

Даже мы сталкивались с подобным типом проблемы.

Если вы показываете один div за раз, тогда вы можете использовать следующее решение:

document.getElementById('myDiv').style.display = 'none';

в div, размер которого больше текущего показанного div.

Это действительно хорошо работает с веб-набором IE10, Chrome Webkit и Safari Webkit.

Ура, Анкит