CSS file targeting iPad

[webguync]

I am trying to adjust my styles to fix a few things when I view the site on the iPad. I don't have an iPad, but I am using a simulator app I found on the internet (http://ipadpeek.com/).

 

I created a specific style-sheet for the iPad and I am accessing it with the following code.

 

<link rev="made" href="mailto:webguync@gmail.com" />
        <link rel="stylesheet" media="only screen and (min-device-width: 768px)
and (max-device-width: 1024px)" href="CSS/iPad.css"type="text/css" />

 

the style-sheet attributes are not getting picked up when I view in the simulator. I tried placing the code for the iPad specific style-sheet above and below where I am linking my main style-sheet and neither worked.

 

Any ideas?

[cssfreakie]

have a look at this article: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

[webguync]

I tried that way, but still don't see the change to the iPad simulator. Maybe the simulator isn't accurate.

   <!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="CSS/iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="CSS/iPad.css" />
<!--<![endif]--