Отображаемая ширина макета не соответствует закодированной ширине (сайт drupal)

Я работаю над веб-сайтом drupal с макетом div фиксированной ширины. Все выровнено и т. д., но по какой-то причине все это примерно на 15 пикселей шире, чем должно быть. Ширина должна быть 900 пикселей, но отображается как 915 пикселей. Это даже растягивает фоновое изображение элемента div заголовка. Это происходит в Firefox, а не в IE (кто знает по какой причине), и я использую стандартную блочную модель. Есть ли что-то, что могут делать элементы drupal? Я пытался изменить размер детей, как сумасшедший, в Firebug, но, похоже, ничего не работает. Единственное, о чем я могу думать с этого момента, это оставить все как есть или начать все сначала. Любая помощь будет принята с благодарностью.

HTML-шаблон страницы:

<div id="container">
    <div id="content-supheader"><?php print fiberop_user_bar() ?></div><!-- calls #content-supheader div -->
    <div id="content-header"></div>
    <div id="content-subheader"><?php print $breadcrumb; ?></div>
    <div id="content-body">

        <!-- Start left column -->
        <div class="square">
            <?php print $left; ?>
        </div>
        <!-- End left column -->

        <!-- Start middle column -->
        <div id="middle">
            <?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>

            <div id="content">
            <?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
            <?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
            <?php if ($show_messages): print $messages; endif; ?>
            <?php print $help; ?>

            <?php print $content; ?>
            </div>
        </div>
        <!-- End middle column -->

        <!-- Start right column -->
        <div class="square">
            <?php print $right; ?>
        </div>
        <!-- End right column -->

    </div>
    <div id="content-footer">
    <?php if ($footer_message || $footer) : ?>
    <div id="footer-message">
        <?php print $footer_message . $footer;?>
    </div>
    <?php endif; ?>
    </div>

</div>

Фактический HTML-код (извините, такой беспорядок):

<div id="container">
    <div id="content-supheader">Not logged in.</div><!-- calls #content-supheader div -->
    <div id="content-header"></div>
    <div id="content-subheader"></div>
    <div id="content-body">


        <!-- Start left column -->
        <div class="square">
            <div id="block-menu-primary-links" class="block block-menu">
  <h2>Navigation</h2>

  <div class="content">
    <ul class="menu"><li class="leaf first"><a href="/" title="" class="active">Home</a></li>
<li class="leaf"><a href="/content/news-and-events" title="News and Events">News and Events</a></li>

<li class="expanded"><a href="/node/6" title="">Corporate</a><ul class="menu"><li class="leaf first"><a href="/content/history" title="History">History</a></li>
<li class="leaf"><a href="/content/company-personnel-listing" title="company Personnel Listing">company Personnel Listing</a></li>
<li class="leaf last"><a href="/content/company-policies" title="company Policies">company Policies</a></li>
</ul></li>
<li class="leaf"><a href="/content/customer-support" title="">Customer Support</a></li>
<li class="expanded active-trail"><a href="/content/overview" title="">Products and Services</a><ul class="menu"><li class="expanded first active-trail"><a href="/content/customer-brochures" title="">Customer Brochures</a><ul class="menu"><li class="leaf first"><a href="/content/sales-brochures" title="">Sales brochures</a></li>
<li class="leaf last active-trail"><a href="/" title="" class="active">User guides</a></li>
</ul></li>

<li class="expanded"><a href="/content/products" title="">Products</a><ul class="menu"><li class="leaf first"><a href="/content/internet-services" title="">Internet Services</a></li>
<li class="leaf"><a href="/content/ -international-prepaid-phone-card" title="  International Prepaid Phone Card">  Int&#039;l Prepaid Phone Card</a></li>
<li class="leaf last"><a href="/content/internet-prepaid-account" title="internet Prepaid Account">internet Prepaid Account</a></li>
</ul></li>
<li class="expanded last"><a href="/content/services" title="">Services</a><ul class="menu"><li class="leaf first"><a href="/content/local-phone-service" title="Local Phone Service">Local Phone Service</a></li>
<li class="leaf"><a href="/content/long-distance-call-and-fax" title="Long Distance Call and Fax">Long Distance Call and Fax</a></li>
<li class="leaf"><a href="/content/digital-cable-television" title="Digital Cable Television">Digital Cable Television</a></li>
<li class="leaf"><a href="/content/digital-gsm-wireless" title="Digital GSM Wireless">Digital GSM Wireless</a></li>

<li class="leaf"><a href="/content/enhanced-calling-services" title="Enhanced Calling Services">Enhanced Calling Services</a></li>
<li class="leaf last"><a href="/content/internal-wiring-maintenance-plan-imp" title="">Internal Wiring Maintenance Plan (IMP)</a></li>
</ul></li>
</ul></li>
<li class="leaf"><a href="/content/promotions" title="">Promotions</a></li>
<li class="expanded last"><a href="/node/8" title="">Resources</a><ul class="menu"><li class="leaf last"><a href="/image" title="">Image Albums</a></li>
</ul></li>
</ul>  </div>
</div>
        </div>

        <!-- End left column -->

        <!-- Start middle column -->
        <div id="middle">

            <div id="content">
            <h1 class="title">Welcome to Company Corporate Portal</h1>                                  
            <div id="node-1" class="node clear-block">



  <div class="meta">


    </div>

  <div class="content">
    <p>Welcome</p>
  </div>

  </div><div id="block-views-news_front-block_1" class="block block-views">

  <div class="content">
    <div class="view view-news-front view-id-news_front view-display-id-block_1 view-dom-id-1">




      <div class="view-content">
      <table class="views-view-grid">
  <tbody>
                <tr class="row-1 row-first">
                  <td class="col-1">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/article-picture" title="Article with Picture" alt="Article with Picture">Article with Picture</a></span>
  </div>


  <div class="views-field-created">
                <span class="field-content">October 6, 2009, 11:02 am</span>
  </div>

  <div class="views-field-teaser">
                <div class="field-content"><p><img height="100" width="150" align="left" src="/sites/default/files/DSC_0570.JPG" alt="" />This is a test of an article with a picture.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</div>
  </div>
          </td>

                  <td class="col-2">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/company-article" title="company article" alt="company article">company article</a></span>
  </div>

  <div class="views-field-created">
                <span class="field-content">September 30, 2009, 12:14 pm</span>
  </div>

  <div class="views-field-teaser">

                <div class="field-content">Article text</div>
  </div>
          </td>
                  <td class="col-3">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/company-article2" title="company-article2" alt="company-article2">company-article2</a></span>
  </div>


  <div class="views-field-created">
                <span class="field-content">September 30, 2009, 12:07 pm</span>
  </div>

  <div class="views-field-teaser">
                <div class="field-content"><p>Article text...</div>
  </div>
          </td>
              </tr>

      </tbody>
</table>
    </div>






</div>   </div>
</div>
            </div>
        </div>
        <!-- End middle column -->

        <!-- Start right column -->

        <div class="square">
            <div id="block-user-0" class="block block-user">
  <h2>User login</h2>

  <div class="content">
    <form action="/content/welcome-company-corporate-portal?destination=node%2F1"  accept-charset="UTF-8" method="post" id="user-login-form">
<div><div class="form-item" id="edit-name-wrapper">
 <label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>

 <input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" />
</div>
<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
 <input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
</div>
<input type="submit" name="op" id="edit-submit" value="Log in"  class="form-submit" />
<div class="item-list"><ul><li class="first"><a href="/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div><input type="hidden" name="form_build_id" id="form-205b20d5edaf8893b9321c6fd3c147fd" value="form-205b20d5edaf8893b9321c6fd3c147fd"  />

<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block"  />

</div></form>
  </div>
</div>
        </div>
        <!-- End right column -->

    </div>
    <div id="content-footer">
        <div id="footer-message">
        <div id="block-user-3" class="block block-user">
  <h2>Who's online</h2>

  <div class="content">
    There are currently <em>0 users</em> and <em>0 guests</em> online.  </div>

</div>
    </div>
        </div>

</div>

CSS:

body, div {
    margin: 0;
    padding: 0;
    }
body {
    background-color: #05142D;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3em;
    margin: 0 auto;
    text-align: center;
    }
#container {
    width: 900px;
    margin: 0 auto;
    text-align: left;
    clear: both;
    }
#content-supheader {
    background-color: transparent;
    color: #FFF;
    font-size: 0.9em;
    height: 15px;
    width: 890px;
    padding: 5px;
    }
#content-supheader a, #content-supheader a:link {
    font-family: Verdana, Arial, sans-serif;
    }
#content-header {
    background-color: #CFCFCF;
    background-image: url("pnccheader.jpg");
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 0.9em;
    height: 150px;
    width: 900px;
    padding: 0;
    margin: 0;
    }
#content-subheader {
    background-color: #000;
    color: #FFF;
    font-size: 0.9em;
    height: 15px;
    width: 890px;
    padding: 5px;
    }
#content-body {
    background-color: #FFF;
    height: auto;
    width: 900px;
    padding: 0px;
    overflow:hidden; /* overflow: auto; causes grayed-out x and y scrollbars to appear */
    }
.square {
    background-color: transparent;
    /* border: 1px solid #000; --> if border are used, must correct height & width of div for height & width of border, otherwise divs get pushed down */
    width: 190px; /* ~13 extra pixels that show up from somewhere! From block? */
    float:left; /* alternately display:inline; can be used, but divs wrap in FF */
    font-size: 0.9em;
    /* overflow: hidden; */
    padding: 5px;
    }
#middle {
    background-color: #FFF;
    border: 1px solid #C0C0C0;
    float:left;
    font-size: 0.9em;
    height: auto;
    width: 458px;
    margin: 5px 0px;
    padding: 10px;
    /* overflow: scroll; */
    }
#content-footer {
    background-color: transparent;
    background-image: url("bottomBG2.jpg");
    background-repeat: no-repeat;
    color: #FFF;
    font-size: .9em;
    height: auto;
    Width: 890px;
    padding: 5px;
    padding-top: 40px;
    text-align: center;
    }
#content-footer * h2, #content-footer * h3 {
    font-size: 1em;
    }
#content-footer ul {
    list-style: none;
    display: inline;
    }
h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 2em;
    display: inline;
    }
h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5em;
    display: inline;
    }
h3 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.5em;
    display: inline;
    }
h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1em;
    display:inline;
    }
h5 {
    display:inline;
    }
hr {
    background-color: #000;
    color: #000;
    height: 1px;
    }
ul li {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    }
ul ul li {
    font-family: Verdana, Arial, sans-serif;
    }
a, a:link {
    color: #336699;
    text-decoration: none;
    }
a:visited {
    color: #336699;
    text-decoration: none;
    }
a:hover {
    color: #003366; /*800080 = nice purple*/
    text-decoration: underline;
    }
a:active {
    color: #003366;
    text-decoration: none;
    }

person Community    schedule 22.10.2009    source источник
comment
Добавление фактического HTML в том виде, в котором он отображается на странице, может немного помочь — таким образом люди смогут увидеть, есть ли там какие-либо дополнительные элементы/внутреннее содержимое, которые могут растягивать его. Также вам может повезти больше с Doctype, так как это довольно ориентированный на дизайн вопрос, несмотря на участие Drupal.   -  person Ben Regenspan    schedule 22.10.2009
comment
Да, вы правы по обоим пунктам. Виноват! Спасибо за отзыв.   -  person    schedule 22.10.2009


Ответы (1)


Я не могу сказать, почему это происходит, но пробовали ли вы расширение Web Devloper для FireFox? Если вы войдете в меню «CSS», а затем выберите «Просмотреть информацию о стиле», вы сможете получить дополнительную информацию о том, какие стили FireFox думает применять к рассматриваемым элементам.

person Douglas Muth    schedule 30.10.2009