CSS gotcha when using VS2010 and IE

I ran into a frustrating gotcha when using VS2010 and updating my .css.

I created the following .css entry:

/* Hidden Column

———————————————————*/

 

.noDisplay

{

    display:none;

}

 

I then implemented it in a basic MVC View:

    <table>

        <tr>

            <th class="noDisplay">

                RegionID

            </th>

            <th>

                RegionDescription

            </th>

        </tr>

 

    <% foreach (var item in Model) { %>

   

        <tr>

            <td class="noDisplay">

                <%: item.RegionID %>

            </td>

            <td>

                <%: item.RegionDescription %>

            </td>

        </tr>

   

    <% } %>

 

    </table>

 

I then spun up my site and started changing some things.  Interesting, every time I change a value in the .css, it was not reflected on the next spin up of the site.  Even if I closed the instance of Cassani running on the desktop, I was getting the same mysterious behavior.  After some frustrating experimenting (that you fiddler), I deduced that IE is caching the .css so as long as I was using the same url (localhost/xxx), the cached .css was being used – IE was not recognizing changes to the .css.  Ugh.

To get around IE’s limitation (perhaps there is also a setting – I haven’t checked yet), I changed the site address everytime.  How, you might ask?  Under Project Properities-> Web in VS:

 

Once I specified a different port for each run – IE would dedect a change in the address and re-load all of the filed – including the new .css.

For the record, this code

    <script type="text/javascript">

        function DisplayColumnIds() {

 

            $(".noDisplay:gt(0)").each(function () {

                var regionId = $(this).html();

                alert(regionId);

            });

 

        }   

    </script>

 

Detected the hidden field like a champ

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: