CSS is not rendering properly; possibly too many linked JS/CSS resources?

4 Views

I’ve been given some instructions to “fix the CSS problems” with a website that is based on WordPress. A co-worker of mine was making changes to this website in our development environment. I believe he switched to a different theme, in addition to several small changes to the template and site content.

Upon first navigating to the website, it was immediately apparent that there is some broken CSS going on.

Read More

A quick look at the source code and I can see that there are a ton of linked JavaScript and CSS files. I have two theories:

  1. Perhaps there exists some overlap in the IDs and/or classes used by the various stylesheets, which has caused undesired results in page rendering.

  2. There are too many HTTP requests being sent off by the browser, causing some of them to be ignored. Is this at all possible?

What appears to be the problem, and how should I go about getting this fixed?

Here is an image of the problem.
EDIT:

I originally posted a link to the website for two reasons:

  1. This is not something that can be easily replicated in a fiddle.
  2. I felt as though there would be a greater chance of getting my question answered if people were able to go to the page themselves and inspect the problem.

Someone felt as though I should remove the link, so I honored their request and replaced it with an image.

That’s fine. You can see the problem in the picture, and you can see a glimpse on the right of just how many JS/CSS files are being included. If you really care to see the website, you can figure it out with enough digging.

Anyways, and maybe I’m overreacting, but I think it was quite harsh to vote to have this post deleted as a result. I am a user just like everyone else trying to get my questions answered. This is not my website. There is no deceptive, underlying motive that I have for making this post, other than I want to get this fixed.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. I think the best approach here is to use Developer Console in Google Chrome or Firebug extension in Mozilla Firefox to investigate the problem.

    First of all open Network tab and refresh your page. You will see all loaded resources. This way you will be able to examine your first theory (if some CSS resources are not loaded). Although, I’ve never heard of a limit to the number of CSS resources.

    Second of all open Elements tab and select a problematic elements on the page. Use Styles panel on the right to investigate what actually happening with the CSS. You will be able to see what rules comes from what files and what rules get’s overridden.

    As a good advice – consider to remove all the extraneous elements and resources from the page. Leave only the bare minimum. That way it will be much easier for you to find the problem. You will be able to add additional resources later, one at a time. Also, consider disabling JavaScript – it will help you to isolate static CSS problems from dynamic ones.

    I can’t be more specific considering the format of your question and the lack of example. if you will provide further details or more specific questions I will be glad to update and extend my answer.

    UPDATE #1:

    Considering your malware problem. Try to find all affected files (that is corrupted by injection), start with your HTML and work toward JavaScript’s. Then replace all corrupted files with original ones. Re-download a theme for example.

    Also consider to check your project for extraneous PHP files. Recently, I’ve encountered a problem myself with one WordPress installation: there was a PHP file injected to a theme directory that was sending tons of SPAM-messages from our server. Nasty.

    I hope it helps, cheers!