title: Link to multiple css files works, but combining into one disrupts css
body: <p>I am having a very strange problem (to me, anyway)</p>
  
  <p>I had linked two css files from my html using the following code:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="global.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="menu.css"/&gt;
  </code></pre>
  
  <p>And everything worked fine.
  But in an effort to reduce HTTP requests, I thought I'd combine them into one file.
  So I copied and pasted the menu.css file into the top of the global.css file, and took out the second line.</p>
  
  <p>After doing this, the css isn't rendering properly. Stranger yet, I experimented by moving some selector css blocks to different locations in the css file, and it rendered differently. Yet this different rendering is apparently not a browser issue, because it renders the same way in at least 3 different browsers.</p>
  
  <p>The rendering differences include positioning, border color, and font styling issues that I've noticed, depending on how I arranged the css selector code blocks. All of them related to the menu css.</p>
  
  <p>Even when I leave the menu css code in the global file, as long as I link to the menu.css file, it will work as expected (despite that the code is copied entirely into the global.css file, and therefore everything in the menu.css file is in duplicate).</p>
  
  <p>I have tried to find a solution for this, but I have not found anything relevant, so I'm wondering if someone has ever encountered this before, or if you have any idea what could be the problem.</p>
  
  <p>I would greatly appreciate some direction. :)
  Thanks!</p>