Logo nudged down from the top of the page. Not sure why

Question

On my site for one particular page the logo is nudged down a few pixels, while on all the other pages it is not. The code is identical(at least I think it is) for all pages so I'm not sure what is causing the issue.

Here is a screen shot of a working vs non working:

Working:

enter image description here

Non-Working:

enter image description here

The code for both is shown below however for some reason, one of the pages doesn't render correctly

<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; }

And here is the generated html for working:

enter image description here

And here's the non working:

enter image description here

This is probably a CSS problem, what we really need to see is the generated HTML for a page where it works and the page where it doesn't, along with the relevant CSS. — DaveRandom, Feb 03 '12 at 10:11
provide the link, or at least the html and related CSS. not possible to tell anything with the code provided. — Nick, Feb 03 '12 at 10:12
After looking at it again, the entire page is shifted down, excluding the background image. — NeverPhased, Feb 03 '12 at 10:28

score 0 · Answer 1 · answered Feb 03 '12 at 11:03

0

for css purpose IE7 different from IE8 and they all differnet from FIREFOX, CHROME....

I dont see you specifying css file for IE7 using

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

You need to have alternate css for IE7 in your page

answered Feb 03 '12 at 11:03

user769889

376
2
12

Thanks for the input, however I am not concerned about any other browser except Chrome at the moment. – NeverPhased Feb 03 '12 at 11:09
1

OP said the problem happens only on a single page; besides, he didn't mention IE7 in particular – Damien Pirsy Feb 03 '12 at 11:14
Well in that case I think I got it wrong - But there is way to check it - use firebug in Firefox OR inspect element on Chrome. - you need to make sure what styling or attributes are being used for image on one page is same as other pages and not being overwritten by other stylings or css files... – user769889 Feb 06 '12 at 10:09

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

I realised that it was to do with the include(); functions I was using before declaring the doctype. So I asked a new question. See below

PHP include() before doctype, causing a white space

edited May 23 '17 at 10:32

Community

1
1

answered Feb 06 '12 at 11:52

NeverPhased

1,546
3
17
31

Logo nudged down from the top of the page. Not sure why

2 Answers2