Strange CSS behaviour

richardo

I was doing a small job on a friend's Wordpress based website.

For the sake of convenience and testing I replicated it in full on a separate server hosted by a different company and also on my PC here. All three sites are working perfectly bar one strange problem - the CSS renders differently on all three servers.

The problem is server side, as I am using the same browser for each. Each server contains exactly the same files and database, but the rendering is significantly different - font sizes, font faces, and on one of them text-transform isn't working.

All are running Apache and PHP [naturally] and the versions are slightly different but this shouldn't affect CSS?

It's not that important as the main site is functioning correctly but I was just wondering why there could be a difference.

JackHeuston

CSS is all client side, and if you're serving a font-size: 8px, it will be the exact same if you put the same page on another server. If you look up the exact CSS rules that are being served in these three cases with the browser's developer tools (usually F12), what do you get? From there, you should try go back the chain and see what causes the change.

Since we're talking about Wordpress, there could be a plugin or who knows what in the backend that minifies the CSS files before serving them, or that alters them in some way. So maybe it's that. Check also that the CSS rules applied are the ones you wrote, and that yours are not being overridden by some other modules that could be present in a case and not in the other.

Can we see the website in question?

richardo

This is what's puzzling me - I know CSS is client side so there should be no difference.

Live site - http://www.aria-capital.ie/

Test site - http://curratech.net/

Of course knowing my luck you'll find they look the same!

I don't want to leave the test site up too long in case of SEO conflicts and all that...

Incidentally, all the plugins have been carried over and are duplicated including settings.

JackHeuston

Yeah they look the same.

Check your browser then, since you're saying you're always using the same one, you might have enabled the zoom. The zoom stays set and it's domain-wide. So if you accidentally zoom in a page in curratech.net, it will zoom in all the others, also in new sessions, while pages in aria-capital.ie would look normal.

richardo

Really weird! I have used two browsers - Opera and Firefox and am sick to the teeth of clearing cashes

The settings remain the same for all the tests. Three screenshots -







Note in particular the menu-bar and the text below the central image.

grahamor

Are those 3 screenshots from the same browser ?

richardo

grahamor wrote: »

Are those 3 screenshots from the same browser ?

Same one, three tabs.

tricky D

There's something strange going on with the opacity of the slides in list items 1 and 4. They are both going from zero to full opacity in a second or two at the same time which doesn't seem right. Looks like the opacity is being manipulated by some .js which might have some sort of timestamping type thing affecting the initial display opacities. Probably in site.js but what exactly I can't tell.

Aswerty

I'm getting a 403 Forbidden HTTP error on the http://use.typekit.net external resource on the http://curratech.net/ domain but not on the http://www.aria-capital.ie/ domain.

JackHeuston

Yeah you should probably check the browser's console, too. It seems from the screenshots that the main font is not being downloaded correctly. If there are issues, they'll appear there.

Aswerty

Actually checkout https://helpx.adobe.com/typekit/using/typekit-develop-locally.html. It appears that typekit requires you to white list referrers, which you probably haven't done for the newer domains.

Graham

Is the Typekit license tied to a specific domain?

richardo

It looks like the Typekit link is the cause of the problem all right.

Many thanks everyone. You have saved my sanity!