 |
| English: CSS rule in Malayalam (Photo credit: Wikipedia) |
I have been reading on ASP.NET, so at least I learn something new. I have been coding and coding and coding, and I have become the woodcutter who did not sharpen his axe. And with the slowdown in load (all major projects completed, and pending roll-out only), I have some free time on my hand.
I found an e-book of Beginning ASP.NET 4.5 in C# and VB, and I skipped the chapters that discussed basic web development, but coming to Chapter 3, I found the CSS section a bit of an eye-opener. Not that I know nothing of CSS -- it is something that I have used extensively on my site, but not entirely the optimum way. And what I have just learned, I tried to apply on one of my simple web applications.
Did I find something to blog on?
You betcha!
I am one who always practiced organization, and I just find that the stylesheet file that was created in the process is 'mixing' with the code files. I just didn't like that. So in the middle of streamlining the CSS codes, have done some pages already, I moved the stylesheet to the \App_Code folder. There was no objection in the IDE...
So, I completed migrating all the inline and embedded styles into the Stylesheet file, so they are all in one common place, and this gave me a chance to remove all redundant and duplicate styles. Wow! Just think of the junk I created... And that is just in the simple web apps...
Anyway, having done everything, I now proceeded to test if what I did works.
Surprise, surprise!
In IE, it did not work. I am using IE10, running in Windows 7 Enterprise. The fonts and colors are all using the default values.
I tried it in Maxthon, in most likelihood, the closest browser to IE. The same behaviour was observed.
I now tried Firefox, and the styles came forth, shining through!
But since the majority of browsers used in our company is IE, I have a problem...
I tried defining the font in the individual rule sets, since the * { font: ...} rule doesn't seem to work at all.
No change.
I put the font definition in the body { ... } rule, and still, no effect.
At this point, I now thought of doing one thing: search the web. Search the web for similar issues and of course, the possible solution to my problem.
Found one article that mentioned the problem to be related to some server issues, and also on the folder/directory that keeps the stylesheet file. Spaces must be replaced with underscore (_).
Well, mine is having an underscore (\App_Code\), so I ruled it out.
I stopped for a while, and tried to think some more...
Then, out of a wild guess, I thought of moving the stylesheet file out of \App_Code\ folder, and back into the main folder.
Did that work?
Yes, it did!
So it wasn't the folder having spaces, and it wasn't the server behaving erratically, but simply, and I confess I don't know why (I don't understand it), the problem was simply due to where the stylesheet file was located.
So a few more code corrections, putting back all those definitions [ * { font: ... } ], and making sure all sections work, I published my modified web apps.
Hopefully it is much faster now.
Till then!
