Блог

Главная - Вопросы по программированию - Topmargin 0 не работает? Проблема с кэшированием?

Topmargin 0 не работает? Проблема с кэшированием?

#css #wordpress #margin

#css #wordpress #маржа

Вопрос:

Кажется, я не могу заставить свою margin-top:0; собственность работать в моей таблице стилей. Я не уверен, почему, но когда я очищаю кеш моего браузера, свойство будет временно работать, а затем вернется к оставлению пробела в верхней части моей страницы (посмотрите: www.sunporchhomes.com ). Я использую WordPress для сборки. Вот верхняя половина моего кода, любая помощь была бы очень признательна.

CSS

 body
{
margin:0;
padding:0;
background-image:url("http://www.sunporchhomes.com/sphbg5.png");
}

a:link {color:#ffffff;}      /* unvisited link */
a:visited {color:#ffffff;}  /* visited link */
a:hover {color:#808080;}  /* mouse over link */
a:active {color:#ffffff;}  /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

#logo {
    margin: 0;
    width: 1000px;
    z-index: 26;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#header {
    width: 1000px;
    height: 175;
    position: absolute;
    top: 0;
    left: 0;
    padding-left:70px;
}

#banner {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 419px;
            z-index: -1;
        }

#navigationtable {
    position:absolute;
    padding-left:730px;
    z-index: 10;
    padding-top:20px;
}

HTML

 <body>

<div id="wrapper" class="hfeed">

   <img id="banner" src="http://sunporchhomes.com/spmain1.png" alt="Banner Image"/>

       <div id="navigationtable">
<table class="tg" width="400">
  <tr>
    <th class="tg-lhfu"><a href="http://sunporchomes.com">HOME</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/warranty.html">WARRANTY</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/features-3.html">FEATURES</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/faq-2.html">ROWHOME FAQ</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/floor-plan-2.html">FLOORPLAN</th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/about.html">ABOUT US</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/neighbourhood.html">NEIGHBOURHOOD</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/contact.html">CONTACT</a></th>
    <th class="tg-031e"></th>
  </tr>

</table>
</div>

 <div id="boxplus">
 <img src="http://sunporchhomes.com/boxplus.png" />
 </div>

 <div id="logo">   
    <img src="http://sunporchhomes.com/splogo13.png" /> 

    </div>
 </div>

Комментарии:

1. У вашего css есть .wrapper , у вашего html есть id="wrapper" — следует изменить css #wrapper , чтобы правильно адресовать этот элемент.

2. Где применяется это верхнее поле?

3. Кроме того, у вас nav установлено значение position:absolute — так что ваши отступы влево и отступы вправо бесполезны для позиционирования (похоже, вы их используете)

4. Какой браузер вызывает эту проблему? Работает правильно для меня в FF и Chrome.

Ответ №1:

Проблема, с которой вы столкнулись, заключается не в вашем css, а в панели администратора WordPress.

Когда вы входите в WordPress, он пытается «принудительно» нарисовать панель администратора в верхних 32 пикселях окна вашего браузера.

Когда ваш css конфликтует с тем, как WP пытается это сделать (что, я полагаю, делает ваш css из-за вашего интенсивного использования position: absolute ), у вас может остаться пустое место вверху, а не панель администратора.

Вы можете отключить панель администратора, отредактировав свой профиль пользователя и сняв флажок «Показывать панель инструментов при просмотре сайта»

Я тестировал в Firefox, Chrome и Internet Explorer — все они отображают ваш сайт правильно, без описанного вами пространства.

Метки: