10

I'm stumbled upon very strange problem, I'm building a HTML mockup, it works well in all major browsers from localhost, but when I've uploaded it to server things went strange.

When I load my site from server in Chrome or Safari, header (which looks as I need it to from localhost) is displayed with distortions. But there is a chance when I reload page that it will be displayed normally.

Code from both locations are identical. Server is running with the apache 2.2.16

Cœur
  • 32,421
  • 21
  • 173
  • 232
user1327
  • 938
  • 3
  • 10
  • 28

3 Answers3

12

It is coming from a CSS which is injected from Adblock Plus Add-On. Deactivating the Add-On fixes the problem in Chrome with me.

This is injected from Adblock Plus right after the closing </body>:

<link rel="stylesheet" type="text/css" href="data:text/css,">
Fabian Barney
  • 13,133
  • 4
  • 37
  • 60
  • 2
    Argh, I hate that kind of thing. It's worth keeping another profile or using Private Mode to debug, but I have to get bitten by this another dozen times before I will instinctively think to check this. – Tom Sep 07 '12 at 18:08
  • 4
    But if it happens to anyone with Adblock Plus installed we need to compensate right? Anyone found any post regarding this matter somewhere? It feels like it mess' up floats. – Henrik Ammer Sep 07 '12 at 18:15
  • Yep, I agree with both of you. :-) – Fabian Barney Sep 07 '12 at 18:17
  • Add missing `` opening tag after ` `. Adblock should inject his stuff in the `` properly. – Pavlo Sep 07 '12 at 18:33
  • @PavloMykhalov Grr, you're right. Server version is missing opening `` again. @user1327 fixed it an hour ago but .. ehrm .. now it is missing again. I already mentioned that an hour ago in an answer i deleted then when it pointed out that it does not fix the problem. – Fabian Barney Sep 07 '12 at 18:39
  • @FabianBarney don't know what's happened. Now it is fixed again. – user1327 Sep 07 '12 at 18:46
  • @user1327 Np, even with the proper `` Adblock Plus is injecting the CSS at the wrong place after the closing ``. So there is still an issue with Adblock Plus. But glad to read that you can avoid the negative impacts. – Fabian Barney Sep 07 '12 at 18:53
  • With all your and @HenrikAmmer help I found the solution (clear:both to nav and float:left to .header img) but it doesn't fully solve the mystery of this problem because in Safari I don't even have AdBlock installed but problem was existed. – user1327 Sep 07 '12 at 18:53
  • Does the float rewrite I did work in Safari? I don't got Safari installed for some reason I do not know :). – Henrik Ammer Sep 07 '12 at 18:56
  • Hmm, maybe something WebKit related. – Fabian Barney Sep 07 '12 at 18:57
  • @HenrikAmmer yes thank you very much. – user1327 Sep 07 '12 at 19:02
2

Your test server looks fine to me.

Two things (independent of Apache) spring to mind, though:

  1. Have you considered browser caching? When you update the CSS file, sometimes the browser will instead use an older, cached version of the file. See this question for tips on this.

  2. File and folder permissions. When uploading to web servers, often the permissions will get overwritten on each upload, and a dependent file (e.g. 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 doesn't work, I'd have a look at the Apache.conf files, to see if there any differences between the localhost and public servers. Can't think what it would be though... Permission differences maybe...

Community
  • 1
  • 1
Alex Leach
  • 1,199
  • 2
  • 11
  • 26
  • I don't run Apache on my local machine because this page is simple HTML so no config differences. And I have this problem only when browse this page with Chrome or Safari, in FF it looks ok in both versions. – user1327 Sep 07 '12 at 17:31
  • This is a bit of a side note, but localhost implies that a separate server process, like Apache, is serving pages through the localhost network interface. This has IP address 127.0.0.1, and host name of 'localhost'. Opening the file in a browser, e.g. through File->Open, isn't quite the same thing, but as this is a raw html and css page so far, it makes no difference anyway. – Alex Leach Sep 07 '12 at 18:10
2

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

.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 has been no feedback there about it being fixed.

That wasn't it. I simplified the page and uploaded a fiddle, http://jsfiddle.net/KqVJ9/ for testing.

FIXED?

This updated version of it, http://jsfiddle.net/KqVJ9/3/, works for me constantly. It might not be exactly the same with padding/margin as the original but those tweaks I leave to you to fix. :)

Henrik Ammer
  • 1,851
  • 13
  • 26
  • I see that it still doesn't work on your site even after removal. – Henrik Ammer Sep 07 '12 at 17:40
  • Ok I removed it from server version but it doesn't help. Now if I load page, then click to address box in Chrome and then hit enter it loads without distortions but if I hit cmd+r (or ctrl+f5 on windows) it loads messy. – user1327 Sep 07 '12 at 17:43
  • @user1327 That's what I can see here, too. But not just since you changed it. Before it was the same behaviour. In the Chrome net panel I see some strange CSS injected into the page after the closing `

    `. I don't know where it comes from. But when it is loaded while the first image is loading then it is messed. When it is loaded after the image has finished loading it looks ok.

     – Fabian Barney Sep 07 '12 at 17:53
  • @user1327 Check this, http://jsfiddle.net/KqVJ9/. It's a simplified version of your page with more robust floats and positioning. Can you try that version on your server please? – Henrik Ammer Sep 07 '12 at 17:57
  • Can you post this strange CSS? – user1327 Sep 07 '12 at 17:57
  • What @Fabian is seeing I'm seeing to. But there is nothing there. Just a request, but it's empty. Or, that is what I think he's seeing. – Henrik Ammer Sep 07 '12 at 18:00
  • @user1327 `` So it is a data-url with no content. It's injected froma javascript, but maybe it is from an extension or so. I am not sure. – Fabian Barney Sep 07 '12 at 18:01
  • @HenrikAmmer I uploaded your test version. http://rt.cutepictures.ru:81/test.html looks like it working well. I need a 30 minutes' break and then I'll try to add other styles to your version, hope it will work. – user1327 Sep 07 '12 at 18:08
  • @user1327 Updated the answer with updated fiddle that works for me all the time. – Henrik Ammer Sep 07 '12 at 18:13
  • @HenrikAmmer ok finally I added clear:both to nav and float:left to .header img and now it works. – user1327 Sep 07 '12 at 18:48