Member Avatar for kireol

I was developing a web site locally with PHP/MySQL on my windows PC running XAMPP.

I got all of my scripts running well! I have it to the point where I decided to purchase the domain name, link my existing 1and1.com account for the server to the domain, and upload all of my scripts/files/images/etc.

For some reason, when I view it on the actual domain(not locally), it looks entirely different from my local windows/xampp copy. My page is way stretched(margins screwed with), and all of the fonts look different.

I've never ran into this before, and I figured someone here would know the answer.

I'm seeing the same results in Firefox and IE.

I checked the CSS with the firefox webdeveloper add-on. no errors.

I checked the site for HTML validation and "found to be valid XHTML 1.0 Strict." http://validator.w3.org/check?uri=http%3A%2F%2Fwww.loanmodassistant.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

I uploaded my entire site again thinking maybe I missed something.

I can deal with the fonts being different although I'd like to know why.

The bigger problem is I can't figure out why the page is "stretched" on live(you can see on the right where it should end based off of the space between the grey box and the right margin), and not on development local box. It's the exact same code!

<SNIP> only the index page is correct at the moment, so excuse the mess on the other pages until i get the index looking correct.


Thanks!

  • 2 Contributors
  • 3 Replies
  • 120 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by seagreen

Dani AI

Generated

Good find by and good prompt from — when a page renders differently between a local Windows/XAMPP box and a live (usually Linux) host, it almost always comes down to one of a few predictable differences: a missing or outdated resource on the server, filename case-sensitivity, path/BASE differences, caching, or fonts that exist locally but not on the server. The checklist below is a compact, practical workflow to catch the problem quickly.

  • Open the browser DevTools Network panel on the live site and reload. Look for 404s, 301/302 redirects, or CSS/JS files that fail to load or return 500s.

  • In DevTools, use the Elements/Computed pane to see which stylesheet rules are applied and which file they came from. That points to the exact CSS source.

  • Check filename case sensitivity (Windows is usually case-insensitive; most Linux hosts are not). Example gotcha:

    <link rel="stylesheet" href="/css/header.css">

    If the file on the server is Header.css it will break on Linux hosts.

  • Verify absolute vs relative paths and any <base> tag differences between environments.

  • For fonts: make sure webfonts are uploaded and referenced with correct paths and CORS settings; do not rely on locally installed fonts.

  • Clear browser cache or use a cache-busting query string when testing.

Improve deployment reliability by using version control and a simple deploy script (git push → server pull or rsync), compare checksums if needed, and add cache-busting on CSS/JS changes:

<link rel="stylesheet" href="/css/site.css?v=20251119">

For reference reading on font hosting and caching best practices see MDN’s guidance on using @font-face and on HTTP caching: Using @font-face and HTTP caching.

Recommended Answers

All 3 Replies

Member Avatar for seagreen

Can you post comparison screenshots or something?

Member Avatar for kireol

I was actually just going to do that and I think that I figured it out.


The problem was me being stupid and programming until 5AM. Long day!

I use an old header.css file. When I FTPd "everything over", i forgot to include the header file. I sorted by date, so of course the old .css file wasnt a current file. I keep a lot of junk in my directories when developing. PEBKAC (problem existed between keyboard and chair!) hahaha.

Member Avatar for seagreen

Programming until 5am? That will do it! =)

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.