Member Avatar for Spycat

Hi,
I have a site that looks fine locally, but when I view it online, it gets messed up.
Specifically, it does not resize correctly (eg at 800x600).
In a turnabout, this only occurs in Firefox (3.6.16) - in IE 8 it resizes ok.
To further confuse the matter, if I put the files on a different server, it looks fine!

Here is the site in question on Server 1:
http://www.lincolnavenuewillowglen.com/nonprofits.html
Resizing doesn't work here.
Also note that image at top-left does not resize correctly either.

Here is the site on Server 2 (identical html and css):
http://www.rudeshoes.com/nonprofits.html

This should not enter into it, since the css file is identical on both servers, but for the sake of completeness, here is my css file:

Not sure if it matters, but I have included a gif of the directory structure of the "faulty", Server 1 as an attachment.
I note there is a directory called "htdocs" - I am pretty unfamiliar with its function, but I thought htdocs were for Windows servers, and I am on Linux.

Does anyone have a clue as to what could be causing this disparity?

Please, no one suggest that I "clear my cache" - I have done that a billion times :-/

structure.gif 3.47 KB
  • 3 Contributors
  • 7 Replies
  • 232 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Spycat

Dani AI

Generated

A short, practical checklist for cases like this: when an HTML/CSS layout appears fine in one place but misbehaves on another, the root causes usually fall into four areas — differences in served resources, server/environment behavior, client/browser settings, or subtle HTML/CSS quirks. The steps below are designed to find which of those is responsible and to make the layout more robust going forward.

  • Fetch and compare the exact files the browser is getting (HTML/CSS/JS). Use curl/wget and a diff to confirm byte-for-byte equality between hosts.
  • Open the browser DevTools Network tab and look for missing resources (404/403), different Content-Type or Content-Encoding headers, and any console errors.
  • Check filename case sensitivity (Windows vs Linux) and path correctness: a single letter-case mismatch will silently break images/CSS on a Linux host.
  • Verify the page is rendered in standards mode (valid DOCTYPE) — quirks mode can change box calculations.
  • Try a fresh browser profile or Safe/Incognito mode to rule out extensions, custom CSS, or altered preferences.
  • Compare computed styles in DevTools side-by-side (which rule is winning, computed widths/heights, box model).
  • If a server-side optimizer (minifier, proxy, CDN) is in the chain, temporarily bypass it to see the raw served files.

A few small CSS patterns that reduce surprises when resizing (add to your stylesheet):

/* predictable box model */
*, *::before, *::after { box-sizing: border-box; }

/* fluid container */
.wrapper { width: 90%; max-width: 1200px; margin: 0 auto; }

/* images scale with their container */
img { max-width: 100%; height: auto; display: block; }

Quick workflow to reproduce and isolate: capture screenshots from both hosts at the same viewport, fetch the raw files and diff them, reproduce the problem with DevTools open and toggle suspected rules. This thread from (with helpful checks from and ) shows how cross-checks and methodical comparison usually reveal the culprit.

Recommended Answers

All 7 Replies

Member Avatar for svilla

htdocs is the default root for apache servers, inetpub is the default root for windows server. But it looks like a hosted site and public_html is where your files shold reside.

I do not see any issue with the resizing (of course I am using FF4.0) except that I am not a big fan of the resizing of the main content.

The pages look pretty much the same except for the container background and triangle under the selected menu option. The first issue is because sands.jpg does not exist on the second server. There could also be a missing image for you menu options.

Member Avatar for Spycat

Hi svilla,
Thanks for the response.
I should have added that my files DO reside in the public_html directory.
Did not know the function of htdocs, so I appreciate the info.

The reason that I check for resizing is altho I design primarily for 1280x1024 resolution, I want the site to look acceptable down to 800x600.
To view it under different resolutions, I use the FF Add-on "Firesizer".

I added the missing images you referred to - I just threw a couple of files onto Server 2 for testing purposes, so I forgot those initially.

Wow, so the page on Server 1 shows ok to you?
Now I am more perplexed than before lol!

Others : Does the site look the same to you on the 2 different servers?

Thx again :)

Member Avatar for Kraai

Site looks 100% to me on both servers.

Member Avatar for Spycat

Thanks Kraai :)

Which browser(s) and resolution did you view them with?

Member Avatar for Kraai

Firefox, 3.6.somerhing i think, and 1024 x 768 resolution

Member Avatar for Spycat

OK, thx Kraii

Member Avatar for Spycat

OK, I feel totally stupid right about now.
I just noticed that I must have inadvertently triggered "Zoom In", under "View/Zoom" in Firefox. I never use that feature, so I am thinking I did it when I was using Photoshop yesterday. The shortcut keys for Zoom in is "Ctrl+" for both PS and FF.
At some point, I must have done that when I didn't notice that FF was "up", and not "PS".

My apologies to everyone for any time they wasted trying to help me on this.
Still, you have my appreciation.

Gonna skulk away now... :icon_redface:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.