CSS of my site broken in chrome - css

Having a really hard time figuring this out.
http://www.gemcode.co.uk/
The site works fine on firefox but is completely broken on chrome.
Havent tested IE as of yet.
I recently bought a basic level membership of cloudflare but I have turned on development mode and purged cache from wordpress CMS panel and the cloudflare settings. This is the most recent change I have made. Before this it was working perfectly.
Any help would be greatly appreciated.
I am clueless.
** Added this into the style.css **
.page-container {
padding-top: 0px;!important
}
It comes up fine on my browser now?
how about you guys?

There is something gone wrong with your JS as I can reproduce the issue on my Chrome - (Canary Version 52).
I think you need to roll back to your previous iteration and then have a look at what changed from when it was working fine to now.
In my experience with WP using page builders, the JS calculations for margin and padding can break very easily. Which seems to be exactly whats gone wrong with your site:
class="et-animated-content"
Is the main culprit.
Most often these issues come from a minification process gone wrong.
Also, you should investigate how your JS/CSS files are served given there is about 2 second delay before any styling what so ever kicks in, which is far too much.

Related

Broken CSS on all pages except Homepage & if via Customize.php

procureure.com/types-de-droits
Here's how it looks via customize.php
Link
I was not doing any major changes. Cleared cache and changed stuff in customize.php but thats it.
I've been working for 2 straight days to get a decent gtmetrix score and overall design. Help would be greatly appreciated.
Just a quick note: GTmetrix score/ Pingdom or google page speed test
are just recommended approach and the speed they show does not
necessarily mean real world differences. Those scores do not cover the
complexity of code of the server side (which also delays the page load
time). So there are scenarios where you have to ignore few of the
recommendations to make sure everything works fine.
Although in your case i can see that there are no css on you page applied externally nor internally. Kindly tweak the css rendering settings to see if it works. The theme is working fine on customize.php because the changes do not affect the back end of the website it's only the front end which gets affected. So CSS are rendering on back end but not of the frontend. It maybe of theme issue if css are not enqueued properly. there can be serveral reasons. Switch to one of the default themes and see if the plugin is working properly. This will help you find out where exactly the problem exists.

Strange CSS brief flashing divs / images issue

I have a website that recently started to have an issue with a bunch of divs containing links and images are flashing at the top of the website momentarily while the page loads.
See: pelicancases.com
It's strange because I see those images already rendered even before the images flash. Also, this is a new occurrence.
Could this possibly be due to CSS animation or CloudFlare caching/optimization?
Any recommendations on how to fix this issue would be greatly appreciated.
If I use WebPageTest to inspect your page I see some browser related issues.
When testing with Chrome there are three 404s
https://www.webpagetest.org/result/160921_2N_1GQS/
http://www.pelicancases.com/android-chrome-192x192.png
http://www.pelicancases.com/favicon-96x96.png
http://www.pelicancases.com/favicon-194x194.png
If I test with IE 11 I don't see any 404s
https://www.webpagetest.org/result/160921_TE_1H77/
To troubleshoot I would start by disabling CloudFlare caching
(Domain > Overview > Development Mode > Enabled)
Then fix the 404s, they may not be the cause of the problem but worth eliminating first.
If you still have the flashing, try and figure out if it's browser related.
Good luck!

WordPress TinyMCE 4.2.8 is messed up in Firefox 43.0.1

I'm not sure what's going on, but I'm only experiencing this problem in Firefox 43.0.1
The editor is all messed up. I ran a Firefox updated, restarted my browser and now I'm having this issue. Here's an image of what I'm seeing now.
Also, not seeing the static WordPress menubar at the top when viewing my website now. Here's what I see instead:
Any idea what's going on since I updated FF?
This is what I see in the network console:
I just figured it out... Apparently, Google had flagged my js/css as malware. I disputed it and now everything is working perfectly.

Why won't my Joomla template load correctly in IE9 on Windows 7 / Vista?

We built a Joomla website for one of our clients which can be located at:
http://mayslakeministries.org/
Although everything was looking fine from our end, the client was seeing the website as if no CSS was being rendered. Unfortunately, I do not have a screenshot at the moment. I will try and get one up here in the next hour or so if we don't come up with a resolution. (If anyone is able to see the mess that I'm describing, if you could post a screenshot that would be appreciated as well. We have limited testing equipment available and it's hard for us to reproduce.)
But here is what we've concluded: the website works fine in Chrome and Firefox on all systems. It works fine with IE10 on all systems as well. However, as soon you switch to IE9, things get strange.
IE9 will work fine if you are on Windows 8, but if you are viewing in IE9 from Windows 7 or Vista, things look as if the CSS isn't being loaded.
Any help would be appreciated. If you view the site and find that the information I've provided contradicts what you are seeing, then let me know. We have limited equipment to test with, so it was difficult for us to be able to see the problem.
This is the first time I've encountered a problem that only occurs on a certain OS.
Oh! One more thing I think is worth mentioning. The Joomla template we are using works fine even on Windows 7 IE9. So we believe it's something that we have done to the website that changed it's behavior.
Here is the Joomla template demo:
http://www.astemplates.com/itempreview/186
Alright, it took is a few days, but we finally figured out the problem.
IE apparently has a limit to the number of resources that can be linked to the page at one time. Our Joomla site has around 200 JS/CSS files being linked through the source, and this caused IE to bug out and not load our CSS properly.
This is one of the strangest problems I've had to deal with, so I'm very glad it's fixed.

Why does our website load so much slower in IE than any other browser?

We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.

Resources