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?

Bluemagica
  • 5,000
  • 12
  • 47
  • 73

1 Answers1

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.

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • That is the problem, cause as I mentioned, the original server acts as if it ignores case even for html classes and ids – Bluemagica Nov 26 '13 at 09:42
  • 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? – Bluemagica Nov 26 '13 at 09:54
  • No, there are not. **Your web browser** handles turning an HTML file and a CSS stylesheet into a viewable page, *not your server*. – Liftoff Nov 26 '13 at 09:57