0

I have this weird scenario where I am moving code between two servers. In the original server everything looked ok, however in the second server the CSS breaks. When I looked into the code, it seems the css styles/classes and the html counterparts both have different casing and those too vary for the same class, so for example, html has class="main_menu" and css has .Main_Menu.

So obviously it should break, however in the original server it seems somehow the casing was ignored and for that reason everything worked properly. So any idea how that was achieved?

Improve this question

1 Answer 1

Reset to default
2

CSS selectors are already case-insensitive.

What you have to watch out for are HTML class names, as they are case sensitive.

See this question for a more detailed explanation.

There are two ways I will tell you to fix this, but both are, in essence, just slapping a band-aid on it and calling it good.

  1. Change each HTML class to include the new CSS selectors
  2. Run the entire stylesheet and HTML rules through a toLowercase() method of some sort.

Both of these will fix your problem, but neither are a very good solution.

The moral of the story is to use one case and stick with it. There is no point in going back and forth.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That is the problem, cause as I mentioned, the original server acts as if it ignores case even for html classes and ids
Thanks for the idea, and the solution would obviously work, but what I would really like to know is how the heck did it work in the original server without any bandaids. I am thinking if there might be some apache modules or settings that might achieve this?
No, there are not. Your web browser handles turning an HTML file and a CSS stylesheet into a viewable page, not your server.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.