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

Question

Я работаю на веб-сайте drupal с маской div с фиксированной шириной. Все выстраивается в линию и т. Д., Но по какой-то причине все это примерно на 15 пикселей шире, чем должно быть. Ширина должна быть 900 пикселей, но отображается как нечто вроде 915px. Это даже растягивает фоновое изображение заголовка 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; 
    } 

Answer 1

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