The site looks perfect with localhost, but not from the server

Question

I came across a very strange problem, I am creating an HTML layout, it works well in all major browsers from the local host, but when I uploaded it to the server, everything became strange ...

When I load my site from the server in Chrome or Safari , the header (which looks the way I need it from the local host) is displayed with distortions. But there is a chance when I reload the page, which will display normally ...

The code from both places is identical. Server works with apache 2.2.16

Screenshots:

How it looks with localhost: http://cl.ly/image/0y3X06333y38

And how it looks from the server: http://cl.ly/image/1B2z0O02293S (you need to load the page from Chrome or Safari and probably reload it 1-2 times)

HTML source: http://cl.ly/1B341v1v112R you can run it from your local host

Link to my test server: (now fixed)

Answer 1

It comes from CSS, which is introduced from Adblock Plus Add-On. Deactivating the add-in fixes a problem in Chrome with me.

This is entered from Adblock Plus immediately after closing </body> :

 <link rel="stylesheet" type="text/css" href="data:text/css,"> 

Answer 2

Your test server looks great to me.

Two things (regardless of Apache) spring, when you consider:

• Did you consider browser caching? When you update a CSS file, sometimes the browser instead uses an older cached version of the file. See this question for tips on this.

• Permissions for files and folders. When uploading to a web server, often permissions will be overwritten at each upload, and the dependent file (for example, a CSS or javascript file) will not be accessible from the running Apache process.

  I run chmod -R 755 /path/to/my/webfolder/ quite often ...

If this still does not work, I would look at the Apache.conf files to see if there are any differences between the local host and the public servers. I can’t think what it would be, though ... Possible deviations ...

Answer 3

I think I found the culprit (it now works every time on my local apaches server):

 .headblock { float: right; width: 650px; } 

(I removed height: auto; )

I also found a post about height: auto issues in Chrome, http://productforums.google.com/forum/#!topic/chrome/ikmnUr22cyI . And there were no feedback about the fix.

This is not true. I simplified the page and downloaded the http://jsfiddle.net/KqVJ9/ fiddle for testing.

FIXED?

This updated version, http://jsfiddle.net/KqVJ9/3/ , works for me constantly. This may not be exactly the same as the margin / margin as the original, but the settings that I leave to you to fix. :)