Логотип сместился сверху вниз страницы. Не уверен почему - PullRequest
Новая
       45

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

0 голосов
/ 03 февраля 2012

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

Вот снимок экрана рабочего против нерабочего:

Рабочая:

enter image description here

Не Рабочая:

enter image description here

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

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

header.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 для работы:

enter image description here

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

enter image description here

Ответы [ 2 ]

0 голосов
/ 06 февраля 2012

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

PHP include () перед типом документа, в результате чего пробел

0 голосов
/ 03 февраля 2012

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

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

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

Вам необходимоиметь альтернативную CSS для IE7 на вашей странице

...