Логотип сдвинут вниз с верхней части страницы. Не уверен, почему

На моем сайте на одной конкретной странице логотип смещен на несколько пикселей вниз, а на всех остальных страницах - нет. Код идентичен (по крайней мере, я так думаю) для всех страниц, поэтому я не уверен, что вызывает проблему.

Вот скриншот рабочего и нерабочего:

Работающий:

введите здесь описание изображения

Нерабочий:

введите здесь описание изображения

Код для обоих показан ниже, однако по какой-то причине одна из страниц отображается неправильно.

<body>
<div class="wrapper"><?php include("include/header.php"); ?>

заголовок.php:

<header id="header">
    <div id="logo">
        <h1 class="hidden">Welcome</h1>
    </div><!-- #logo -->

<?php include("getstageinfo.php");
switch ($currentStage)
{                       
case "0":

    $home ="period0.php";
break;

case "1":

    $home ="period1.php" ;

break;

case "2":

    $home ="period2.php" ;

break;

case "3":

    $home = "period3.php";

break;

}
?>
<nav id="nav">
    <h1 class="hidden">Main Navigation</h1>
    <a class="nav-item current" href="<?php echo $home ?>">HOME</a>
    <a class="nav-item" href="news.php">NEWS</a>
    <a class="nav-item" href="accounts.php">ACCOUNTS</a>
    <a class="nav-item" href="logout.php">LOG OUT</a>
    <div id="nav_edge">&nbsp;</div><!-- #nav_edge -->
</nav><!-- #nav -->
</header><!-- #header -->

CSS:

body { background-color: #031311; margin: 0px; padding: 0px; width: 100%; position: relative; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; overflow-x:hidden; font-size: 14px; line-height: 1.6em; color: #2a2d32; }
#header { margin: 0px; padding: 0px; width: 100%; height: 350px; display: block; position: relative; overflow: hidden; }
#header #logo { background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: center top; display: block; margin: 0px; padding: 0px; height: 450px; width: 100%; }
#header #nav { position: absolute; height: 50px; width: 455px; left: 50px; top: 298px; background-image: url(../images/nav_bg.png); background-repeat: repeat; background-position: left top; margin: 0px; padding: 0px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8C9791; border-bottom-color: #8C9791; border-left-color: #8C9791; }
#header #nav .nav-item { font-size: 14px; line-height: 50px; color: #E1E7EA; display: inline-block; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; font-style: italic; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 15px; text-shadow: 1px 1px 1px #000; }
#header #nav #nav_edge { background-image: url(../images/nav_edge.png); background-repeat: no-repeat; background-position: left top; display: block; margin: 0px; padding: 0px; height: 52px; width: 40px; position: absolute; top: -1px; right: -40px; }
#header #nav .nav-item:hover, #header #nav .nav-item:focus { color: #FFF; }
#header #nav .nav-item.current { color: #2BD5CC !important; }

А вот сгенерированный html для работы:

введите здесь описание изображения

А вот нерабочее:

введите здесь описание изображения


php html css graphical-logo
person NeverPhased    schedule 03.02.2012    source источник
comment
Это, вероятно, проблема CSS, что нам действительно нужно, так это сгенерированный HTML для страницы, где он работает, и страницы, где он не работает, вместе с соответствующим CSS.   -  person DaveRandom    schedule 03.02.2012
comment
Может быть проблема в CSS, вы это проверяли?   -  person Damien Pirsy    schedule 03.02.2012
comment
предоставьте ссылку или, по крайней мере, html и соответствующий CSS. невозможно ничего сказать по предоставленному коду.   -  person Nick    schedule 03.02.2012
comment
Хорошо, я добавил CSS и предоставил сгенерированный HTML   -  person NeverPhased    schedule 03.02.2012
comment
При повторном просмотре вся страница смещается вниз, кроме фонового изображения.   -  person NeverPhased    schedule 03.02.2012
comment
Оооочень нужно видеть настоящий HTML, а не скриншоты.   -  person j08691    schedule 06.02.2012

Ответы (2)


arrow_upward
0
arrow_downward

для цели css IE7 отличается от IE8, и все они отличаются от FIREFOX, CHROME....

Я не вижу, чтобы вы указывали файл css для IE7, используя

<!--[if lte IE 7]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

У вас должен быть альтернативный CSS для IE7 на вашей странице.

person user769889    schedule 03.02.2012
comment
Спасибо за вклад, однако на данный момент меня не беспокоит какой-либо другой браузер, кроме Chrome. - person NeverPhased; 03.02.2012
comment
ОП сказал, что проблема возникает только на одной странице; кроме того, он не упомянул конкретно IE7 - person Damien Pirsy; 03.02.2012
comment
Что ж, в таком случае я думаю, что ошибся. Но есть способ проверить это — использовать firebug в Firefox ИЛИ проверить элемент в Chrome. - вам нужно убедиться, что стили или атрибуты, используемые для изображения на одной странице, такие же, как и на других страницах, и не перезаписываются другими стилями или файлами css... - person user769889; 06.02.2012

arrow_upward
0
arrow_downward

Я понял, что это связано с include(); функции, которые я использовал до объявления типа документа. Поэтому я задал новый вопрос. Смотри ниже

PHP include() перед типом документа, вызывая пробел< /а>

person NeverPhased    schedule 06.02.2012