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

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

0 голосов
/ 22 октября 2009

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

1 Ответ

0 голосов
/ 30 октября 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...