Menu
I’m trying to get a handle on how media queries are coded so they work properly when the browsers that do not support them and also on browsers that do. Let me give a small example:
I design a page with a banner graphic that is 1200 pixels wide. Under the banner are 3 columns, navigation, content and advertisements. I also design a variable width banner for my page. If the browser screen is wide enough, I want to display the nice graphic and also the ads, if not, use the variable width banner and drop the ads.
I place my banners in two different DIV sections and create two style sheets, each one uses the display: none; directive to hide one or the other banner.
I want to use the narrower CSS as my default.
As I understand media queries, I have to put the alternate CSS file inside an if this is ie8 block and say use it for widths greater than 1200. The question is, how do I override the fact that the other stylesheet which is to be used for all browsers, even those that don’t understand media queries, has hidden the wide banner graphic?