Changing CSS having no effect!

In the week just gone by, I received a web app from one of my colleagues who was on medical leave. This was supposed to be a prototype of what I will be developing in the days to come. However, there were many issues with the UI of the site. The color scheme though looked good did not match with the logo of the company and had to be changed.

It took me some time to realize that the CSS file being used was one within the App_Themes folder and not the one outside. I had been making changes to the wrong file, hence the changes I was making were not reflecting. But hang on!! Now I was making changes to the correct file but still I could not see the changes reflecting in the front end. I double checked and was stumped. Just moments ago the changes made to the CSS were reflecting in the UI. What could be the possible reason now?

Somehow I had the feeling that I should refresh the page once(probably because of my experience with Service Desk Customization) and Bingo!!

Now I again I made some changes mainly changing the logo, but again it wasn't reflecting. I refreshed. Nothing!! Now what could be the reason? Thankfully I had a backup of the original CSS file. I compared that with the modified one. I realized what was happening. To work faster I was using the build style option in Visual Web Developer. When you use this a Window opens where you can visually set the CSS properties. I was using this to set the background image to the one I had created. The location of this image was "App_Themes/Theme1/Images/Image1.gif". So what was happening was the in the CSS the same url for the image was getting stored. But as my CSS file was already located at "App_Themes/Theme1/" the correct url for the image should have been "/Images/Image1.gif". I changed the Url and Voila!!

As I had posted earlier, Microsoft is always trying to simplify things by allowing you to code Visually. But this Visual coding style has pitfalls and is a sure source of many bugs in applications. My advice to all is "Be Extra Careful when writing code Visually!"

Cheers!!