Both landscape.css and portrait.css are being applied

Question

I have the following declared in my HEAD tag:

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" media="all and (orientation:landscape}" href="css/landscape.css">
    <link rel="stylesheet" media="all and (orientation:portrait}" href="css/portrait.css">

Looking in firebug lite for iPad I see that styles from both portrait.css and landscape.css are being applied. The styles are conflicting and messing with my page. When I force portrait.css to load (by removing the landscape line) portrait mode works fine. When I force landscape to load (by removing the portrait line), landscape works fine. I want portrait.css to be applied ONLY in portrait and landscape.css to be applied only in landscape.

Answer 1

in your media attributes, you have } to close the condition, instead of )