title: Trouble getting Conditional CSS for iOS devices to work
body: <p>I'm having some trouble with "conditional" CSS for iOS devices. Here is the source I currently have... take note of the two linked stylesheets. If it's not clear, I want the mobile.css file used if it's an iPhone/iPod Touch device and style.css otherwise. I'm getting weird instances where some portions of CSS tags are being pulled from one CSS file and other tags from another. </p>
  
  <p>For example, I want a different header displayed depending on which platform. I have a #header{} section in mobile.css and a #header{} section in style.css both of which have their own background-images. Things work fine on a non-mobile device, but when I load the page on my iPod Touch, I get the image from the style.css but with the width/height from mobile.css (thus crops/cuts off the image). What could I be doing wrong? Both CSS files validated fine.</p>
  
  <p>Thanks in advance! (in case it's of any relevance, this is all through Grails)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; 
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; 
      &lt;title&gt;Home&lt;/title&gt; 
      &lt;link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" &gt; 
      &lt;link rel="stylesheet" href="/css/style.css" &gt; 
          &lt;meta name="layout" content="main"&gt; 
  &lt;/head&gt; 
  
  &lt;body&gt; 
      &lt;div id="header"&gt;&lt;/div&gt;
          &lt;p&gt;Test&lt;/p&gt;
  &lt;body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>#header {
      background-image: url('../images/casmlogo.png');
      background-repeat: no-repeat;
      height: 200px;
      margin-left: 20px;  
  
  }
  </code></pre>
  
  <p>mobile.css</p>
  
  <pre><code>#header {
      background-image: url('../images/logo-apple.png');
      background-repeat: no-repeat;
      height: 100px;
  }
  </code></pre>