2

I have a bit of an issue on my website. On my website's pages, there is a section that changes position for no reason when the page is refreshed. It doesn't move when I simply click on the URL from the menu, or just type it again in the address bar of my browser.

I tried using overflow-y on the html and body tag, but it didn't help with the issue. Here's what it usually looks like: When it works fine (typing URL or accessing page from menu)

And here's what it looks like when the page is refreshed: When it doesn't work so well...

As you can see, on page refresh, this section gets lower and is hidden behind the content of the page.

Here's the code of this section :

HTML/PHP

<div id="topBar">
    <h4>Cegep Network : <?php echo $_SESSION['school']; ?></h4>
    <a href="disconnect.php"><div id="topBarDisconnect"></div></a>
    <div id="topBarUser">
        <h5><?php echo $_SESSION['firstName'] . " " . $_SESSION['lastName']; ?></h5><br />
        <p><?php echo "Le " . $day . " " . date('j') . " " . $month . date(' Y'); ?></p>
    </div>
</div>
<div id="topBarSpace"></div>

CSS

#topBar
{
    height: 43px;
    padding-left: 13px;
    width: 100%;
    position: absolute;
    left: 4px;
    top: 0;
    background-image: url("images/topBar.jpg");
    color: white;
}

#topBar h4
{
    display: inline-block;
    margin-top: 13px;
}

#topBar h5
{
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 0px;
    font-size: 11pt;
}

#topBar p
{
    font-size: 8pt;
    display: inline-block;
    margin-top: -5px;
}

#topBarDisconnect
{
    width: 80px;
    height: 38px;
    background-image: url("images/dcButton.png");
    float: right;
    margin-top: 2px;
    margin-right: 44px;
    margin-left: 9px;
}

#topBarDisconnect:hover
{
    background-image: url("images/dcButtonHover.png");
}


#topBarUser
{
    float: right;
    text-align: right;
}

#topBarSpace
{
    height: 43px;
    width: 100%;
}

Hopefully one of you brilliant people knows a solution to this problem! I've looked around, only to find unanswered questions! Thanks in advance!

Émile Perron
  • 813
  • 10
  • 26
  • 1
    With the code provided, does it work as expected with a fiddle? If not, provide more code. If there is too much code, then the question is too localized. It is a good idea to almost always provide a fiddle. – bjb568 Nov 14 '13 at 04:19
  • I've barely ever used fiddle before, but I don't think it would be able to simulate a page refresh and accessing page from a regular URL, would it? :/ And if it doesn't, I don't really see how it could help resolve the issue. – Émile Perron Nov 14 '13 at 04:23
  • 2
    Refresh = run button. "how it could help resolve the issue" It won't. It will help us, and it will help isolate the problem. – bjb568 Nov 14 '13 at 04:25
  • 1
    Replaced the PHP with some placeholder text and added background-color to the divs so we could see. Here it is: http://jsfiddle.net/C5LqJ/ – Émile Perron Nov 14 '13 at 04:33
  • Works for me, problem must be somewhere else. Reminds me of the time where I pulled my hair out over `footer.offsetHeight` being wrong (until a window resize) because of an uncleared float way above it. (tho totally unrelated) – bjb568 Nov 14 '13 at 04:36
  • hahah :p I've had this issue before on another website of mine before and never found a solution by myself or on Google... Hopefully I can find one with help from people here ehhe – Émile Perron Nov 14 '13 at 04:38
  • http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load . I think some script loading issues there. if something you got with in document.ready function . then please change with window.load function. – SAFEER N Nov 14 '13 at 16:01
  • There are no scripts in my pages, I don't even know basic javascript! :/ – Émile Perron Nov 14 '13 at 16:15
  • Possible some js getting run on doc load I think...are you sure there aren't any scripts? Does the same thing happen on other browsers? There's always a chance some browser plugin that uses js is messing with it. – Melbourne2991 Nov 16 '13 at 06:05
  • @Melbourne2991 I'm sure, the only script there are on my pages are the adsense ads, but the issue was there before I even had ads on the website. – Émile Perron Nov 16 '13 at 06:18
  • Can you give us a link to the page or is it locally hosted? – Melbourne2991 Nov 16 '13 at 06:22
  • @Melbourne2991 Cannot give you a link; The website is live but restricted to me only for the moment. – Émile Perron Nov 16 '13 at 06:28

1 Answers1

0

Looks to me like it might be related to you the $_SESSION variable. It's the only reason I can think of that a refresh would differ from loading the page via URL. You are setting the 'h5' as an inline-block, so surely there should be no need for the 'br' after the 'h5'? Can you see not see a difference in the code when using 'view source' on both pages, as that might give a good indication of where exactly in the code it's going wrong?

Gavin Simpson
  • 2,766
  • 3
  • 30
  • 39
  • I did compare the source code of the page when it's fine and when it's not. It's the exact same, not one character is different. The session information that's echoed is the exact same on refresh. – Émile Perron Nov 16 '13 at 20:22
  • I just tested the page on my Dell laptop and it seems to work without any issues, so it's probably a Mac OS thing, which means my demographic won't be affected too much by this bug. – Émile Perron Nov 17 '13 at 01:31