Visual Studio 2013 Odd behavior

Hi all,

I started a new ASP.NET Web forms project

I added a master page, followed by a CSS file(ttt.css) and a Webform. I placed the ttt.css file in a folder called CSS.

I have not added anything to the Master page (yet). Currently it is the default that VS creates.

My webform contains 9 buttons. The code follows:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><link href= "css/ttt.css" rel="stylesheet" type="text/css" /></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><div class="button-container"><asp:Button ID="btnSq1" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq2" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq3" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq4" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq5" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq6" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq7" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq8" class="button-style" runat="server" Text="Button" /><asp:Button ID="btnSq9" class="button-style" runat="server" Text="Button" /></div> </asp:Content>

And my CSS file:

 .button-container {
    width: 700px;
    background: gray;
    overflow-y: auto;
    position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
 }    


 .button-style {
    width: 200px;
    height: 200px;
    float: left;
    background: lightblue;   
    font-size: 20px;
    margin: 15px;
  }

When I "run" the project in Internet Explorer it displays the following:

https://drive.google.com/file/d/0BwHoDS_llfwSYXozNlZ1YnpxWmM/view

(Image will be removed sometime later in 2016)

That is what I want, so far so good!

Now I change anything in the CSS file, for example, in the .button-style margin property from 15 to 5 px. I then "run" the project again and I get a directory listing!

This usually indicates a permissions issue, but why did it work the first time? Why not when I change something in the CSS file?

Now I go back to the code and in the ASPX file comment out the link that references the CSS file, or I simply change the name of the css file to something invalid and rerun the project. I now get a row of buttons without the formatting. I then go back to the code and uncomment the link line or fix the CSS file name, run again and I get the buttons in the layout as illustrated in the above link image, taking into account the latest change in the CSS file.

And there you have it. Every time I change the CSS file and run it I get the directory listing. I then remove or invalidate the CSS link, run it, exit, go back and fix the link statement, run it again and it works again, reflecting the change in the CSS file. This behavior is so odd that I can't seem to narrow down a good search phrase..  I even scrapped the project and redid it again and I still get the same behavior. I've done previous projects and none have exhibited this behavior before. Does anyone have a clue? Or possible recommendations? I really appreciate the time taken to read this and for any orientation. Thanks! Saga

Update:

On a hunch I removed all style formatting from the Button tags and the Div on my ASPX. Resulting in the following code:

<div><asp:Button ID="btnSq1" runat="server" Text="Button" /><asp:Button ID="btnSq2" runat="server" Text="Button" /><asp:Button ID="btnSq3" runat="server" Text="Button" /><asp:Button ID="btnSq4" runat="server" Text="Button" /><asp:Button ID="btnSq5" runat="server" Text="Button" /><asp:Button ID="btnSq6" runat="server" Text="Button" /><asp:Button ID="btnSq7" runat="server" Text="Button" /><asp:Button ID="btnSq8" runat="server" Text="Button" /><asp:Button ID="btnSq9" runat="server" Text="Button" /></div> 

It ran fine, without any formatting, of course. I then changed the CSS file, ran it and again I got the directory listing. I then went back and added the class to the Div and Button tags, ran it again and it worked fine. After more testing I concluded the following:

When I modify the CSS file, even adding a comment, and run the site the directory listing comes up.

After the directory listing comes up, if I modify anything in the ASPX file, and run, the correct content is presented

Modifying the CSS after the directory listing come up does not change anything. It is only after I modify the ASP file that the correct content is displayed

Exiting VS and opening the project again does not fix the problem

Even adding a comment in the ASPX file, after the directory listing comes up, will fix it.

Editing the CSS file and then editing the ASPX and then running the project will cause the correct content to display.

This is so bizarre!