CSS встроенный / блок проблема с Chrome

Question

http://erickochphoto.com/avejoe/?page_id=14 хорошо отрисовывается в FF и IE, но не работает в Chrome.

Я использую clear: оба display: block / inline везде, где я могу думать, но у меня не получается. Есть идеи?

#main {
    margin: 0;
    padding: 0;
    width: 800px;
    min-height: 375px;
    background: url(images/paper.png) repeat-y;
    display: inline;
    float: left;
}
#leftBackCopy
{
    display: inline;
    margin: 0px;
    padding: 0px;
    background: url(images/map.png) no-repeat;
    width: 122px;    
    height: 426px;
    float: left;
}
#rightBackCopy
{
    display: inline
    margin: 0px;
    padding: 0px;
    background: url(images/trimCam.png) no-repeat;
    height: 195px;
    width: 122px;
    float: left;
}
#mainHolder
{
    display: block;
    clear: both;
    margin: 0 auto;
    padding: 0;
    width: 1044px;
}

Answer 1

Попробуйте добавить:

#mainHolder {
  overflow:auto;
  margin: 30px auto 0 auto;
}

Оставьте все остальные стили без изменений, просто добавьте выше.Работал для меня, надеюсь, это работает для вас.

Answer 2

Я не слишком углубился в это, но удаление этой части вашего HTML, похоже, решило проблему и поставило вопрос (в Chrome):

<div class="menu"><ul><li ><a href="http://erickochphoto.com/avejoe/" title="Home">Home</a></li><li class="page_item page-item-14 current_page_item"><a href="http://erickochphoto.com/avejoe/?page_id=14" title="Test">Test</a></li></ul></div>

Таким образом, возможно, в CSS существует конфликт относительно класса меню или его неупорядоченного списка.