CSS3 Media Queries: Resizing issue

Using media queries, but buggy resize

[coopersita]

Hi,

I'm using media queries to deliver different versions of the site to different monitor resolutions/device. It's working fine so far, except when I resize the screen to the smallest resolution, the design changes, but it's all messed up (like it doesn't load the handheld stylesheet). If I reload (while the screen is small), the handheld style kicks in as expected, and it all works great. Here's my code:

<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/large.css" media="screen and (min-width: 1501px)" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/medium.css" media="screen and (min-width: 1025px) and (max-width: 1500px)" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/small.css" media="screen and (min-width: 715px) and (max-width: 1024px)" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/handheld.css" media="handheld and (max-width: 714px), screen and (max-device-width: 714px), screen and (max-width: 714px)" /> 
<!--<![endif]-->

I'm using javascript for IE 8 and less (IE 9 is supposed to support them), and the javascript actually works better. As you can see, it's part of a Wordpress theme.

Can you see something wrong with my media queries?

Could it be because I'm using Javascript extensively on this site (jQuery for a variety of effects)?

How come it's not loading handheld right away, and only after a reload?

Thanks

[Major_Payne]

You're not using the media attribute [w3.org] correctly. Media-dependent cascades [w3.org]

Might want to use a script to detect the window size and send correct CSS file to browser.

[coopersita]

Actually, I am using it correctly.

It turns out it does work perfectly. It was my javascript that was interfering. Once I fixed my JS, the media queries worked like a charm.

[Major_Payne]

Guess you did't read the links. But glad you found the actual problem. I wasn't stating that the media attribute WAS the problem. Just that using a script to detect size would be a good way.