Offline and Online web pages appear different - same PC and Browser

[bobg]

My clients tells me that when he views his web page online, the pages appear different than when he views copies of the same files offline, even when using the very same PC and browser.
My client does the day-to-day updating of his web pages, working with offline copies of the html pages (using CoffeeCup Free HTML Editor) (he NEVER touches the CSS sheet). He then uploads the amended files using CoreFTP Lite. Once or twice a year, I (using a different PC) make bigger changes (CSS, DIV'S etc.) by downloading the online files (again using CoreFTP), making the required changes, and uploading them with CoreFTP. My client then downloads these files from online, to his server's hard drive, ready for him to make the day-to-day changes, and upload them again.
Now, whilst I fully appreciate that in web design there are issues about browser compatibility, what I don't appreciate is that when my client views the web pages online (the 'live' version), and then compares them to the same (offline) pages that he's just double-clicked on his server PC, there are differences, the biggest being that the navigation panel, positioned at the right online, appears over at the left in his offline versions of the files.
Perhaps I need to add that a)I myself do not see any difference between my copies of the offline files and the ones online, and b)both he and I have cleared our browser's cache out, many times.
Bob

[ralph.m]

Hi Bob. Welcome to the forums.

Before anything else, I'll just quietly suggest that it sounds like you need a CMS, so that the client doesn't have to edit files/templates etc. Or perhaps you'd even like to consider a version control system? (Admittedly, that's over my head ... but just saying. )

Anyhow, that said, it does sound odd. Is he using a different browser in each situation?

Is he happy with the online versions? If so, another option is for him to have an online test page where the changes are first made. Then, when all's well, those changes can be made live.

[bobg]

Hi Ralph, thanks for the reply. The strangest thing is that he is using the same PC, with the same browser (IE9). When he views online it's OK, i.e, as I see it myself and as how I'd like it to look, but when he double-click's the offline versions, the navigation is in the wrong place. To add to this, he has two colleagues who also do the daily editing - they too view it wrong, even when using their own PC with just their one browser. I have spent two hours searching the Internet for other people having the same problem and have only been able to find two other people: one replying to the other, and that was back in 2001!
I think a CMS would be a bit late now, I'm afraid (they don't like change!).
Bob

[ralph.m]

One thing you could do is look "under the hood" at the page while on the desktop and see if there's a difference in the styles that apply there as opposed to those that apply online. Could it be that not all of the styles that are online are also on the client's desktop?

Also, get the client to try the pages in another browser like Chrome and see if the same thing happens.

[bobg]

Hi Ralph, I got my client to open up both the stylesheet file and also the index.html file that are stored on his PC in notepad, copy and paste the contents into two separate emails, and send them to me (I thought it best not to ask them to send the files as attachments, incase, well, I dunno, just in case! The textual content of both of the files are exactly the same as a)the textual content of the live files out on the the internet, and b)identical to the ones that I have stored on my PC.
This has been going on for a few days now, i.e, I have spent a few hours over the last few days, trying this and trying that. They have tried a couple of different browsers between them (two different versions of IE, and FireFox), and they have been having similar problems. To repeat: The strangest thing is how can the pages look different online as opposed to offline, when the PC and browser viewing them is the same! Very strange!
bob

[ronpat]

Can you provide us with a link to the site, and ideally, screenshots comparing his offline vs online views?

Sometimes server residence makes a difference.

[bobg]

That sounds interesting, thank you. Whilst I get this organised, can you please explain a little more about 'server residence' for me please? If it's any use: My client sits at his desk and views the pages online fine (I know who the hosting company are); he double-clicks the local files that are stored not strictly on his own PC, but stored on a Windows 2003 Server, on his local LAN, and these display different. Cheers, Bob.

[bobg]

Hi again Ronpat,
An example of one of the pages of the live, online website is: http://www.bandltd.org.uk/training_programme.html

The following two images were snapped (of the same particular page) by my client three days ago, and show the online version, with the navigation bar correctly over at the right, and my clients local version (same html file, same css file), with the navigation bar incorrectly over at the left, as viewed from his PC with the same browser. Please note that the version that you see live today will be slightly different, as I've made a couple of subtle changes since three days ago (in an attempt to fix the problem - but sadly he is still viewing it similar to the following images):




Thanks, bob

[ronpat]

IE is being your friend and letting us know there is a fundamental problem with the page layout. Will post some recommendations after a lunch break.

[ronpat]

These changes should fix the IE problem and produce a page with less interaction between elements.

On training_programme1.html, add a new div#banner around line 20-21.

<div id="main-container">
    <div id="banner">
        <p class="banner-band">Bristol Association for<br />Neighbourhood Daycare</p>
    </div>
    <div id="main-content">

Move the </div> from before <div class="navigation"> (line ~298) to just above the </body> tag at the bottom of the page.

On training_programme1.css

h1, .banner-band {
    color:#08844A;
    font-weight:bold;
    font-size:200%;
    line-height:30px;
    font-family:"times new roman", serif;
    padding-top:5px;    /* added */
    margin:0px;   /* changed.  position with padding instead. (negative margins (esp. vertical) often used to compensate for problems elsewhere; in turn cause more problems.) */
}

#main-container {
/*    background-color:#fff;   /* background-color for entire page */
    width:904px;             /* height was removed */
    color: inherit;
    font-size:105%;
    overflow:hidden;         /* added */
    margin:0 auto;
}

#banner {                    /* this is a new div */
    border-style:groove;
    border-color:#08844A;
    border-width:2px;
    background-image:url(images/test.jpg);
    background-repeat:no-repeat;
    width:900px;             /* allows 4px for border */
    height:156px;
}

#main-content {
    background-color:#fff;   /* background-color for main-content only */
    float:left;
    width:704px;             /* main-content + padding + navigation widths cannot exceed 904px */
    padding:10px;
    margin:0px;              /* changed.  (negative margin-left not a good idea. change padding-left instead) */
}

.navigation {
    background-color:#fff;   /* background-color for navigation only */
    float:left;              /* consider float:right */
    width:179px;
}

Comments:
(1) You may want to tweak the text spacing in a place or two. Suggest that you avoid using negative vertical margins when more appropriate methods are available.
(2) There should really be only 1 <h1> tag on a page.
(3) Why not change <p class="banner-band"> to <h1> ? Google will be happier. Then change both current <h1> tags to <h2>, the <h2>s to <h3>, etc.
(4) Avoid using <p> tags to provide margins over and under images, such as the Band box. Margin the boxes directly instead.

[bobg]

Wow! Ronpat - that looks really interesting - thanks ever so much for going to all that trouble. It's 23:00 hours here in the UK at the moment, so I won't be able to check your suggestions over until tomorrow. But I'll do that and get back to you asap. Many thanks for all your help once more, Bob.

[bobg]

Hi again Ronpat. I've made the changes to the CSS, and have also made the html changes to all thirty-plus pages, and it's all looking absolutley terrific when I view them in the last six versions of IE, Chrome, Firefox and Safari at browsershots.org (although the ancient IE6 doesn't have a left-hand margin, but who cares!). I'm really, really grateful for your assistance with this. I'm now waiting for my client to test them out when they return to work on Monday, but I'm very confident that you've fixed this for me. Thank you ever so much, once again. Bob.

[ronpat]

Thanks very much for the feedback, bobg. Glad to hear it's working so well. The changes, html especially, were very fundamental and well worth the effort. Should your client have devised yet another unforseen way to "break" the layout, it should be easily managed in css <smile>. Best of luck.

[bobg]

Hi Ronpat, just to let you know that my client has checked everything over and informs me that everything is now hunky dory! Many thanks for you help once more - it's got me out of a fix! Bob.

[ronpat]

Thank you for taking the time to post the followup about your client's results. Am very glad to hear the repairs are working so well. That makes the effort worthwhile.

Cheers,
Ron.P