issues when using css media queries
I've had a look around at others issues and already tried a few suggestions but to no avail. Wondering if I could get some help?
My issue is basically this:
The site I'm working on is using PIE for rounded corners and the site is responsive; so there are 3 layouts which get triggered at certain sizes via CSS @media queires. The mobile version uses a menu which is hidden using 'display: none', in both the tablet and desktop versions and then set to 'display: block' for the mobile layout. When the window is resized to trigger the mobile layout; firstly the div with the rounded corners is not rendered at all (it's just a div with green background, so I know it's not visible). So you refresh when the window is at this size and then the div shows with the rounded corners.
However when you then resize the browser window back up to see the tablet and desktop version then div is set back to 'display: none' - but it's really screwed up in the sense the div doesn't disappear, it's position changes and it's massive (sometimes filling the screen).
I have tried this approach: viewtopic.php?f=3&t=23
But I'm not sure this will work for me as the element which uses PIE is part of the layout and not trigger by some sort of click event in jquery (?). Perhaps I'm doing something wrong, but this is how I have it in my js file currently which gives me an error in IE:
If anyone is able to help out, that would be gratefully appreciated. any thanks in advance too