Resend. Please discard previous ones. Thank you very much! Yes, this works! I didn't realize order could be an issue.
I took a look at that boston global site that everybody was talking the other day, it has this order: @media screen and (min-width:480px) @media screen and (min-width:620px) @media screen and (min-width:810px) @media screen and (min-width:1400px) @media screen and (max-width:810px) @media screen and (max-width: 810px), print @media screen and (min-width: 380px) @media screen and (min-width: 480px) @media screen and (min-width: 480px) and (max-width: 620px), print @media screen and (min-width: 480px) and (max-width: 639px), print @media screen and (min-width: 620px), print @media screen and (min-width: 810px) @media screen and (min-width: 980px) @media screen and (min-width: 1220px) @media screen and (min-width: 480px) @media screen and (min-width: 480px) and (max-width: 620px) @media screen and (min-width: 620px) @media screen and (max-width: 810px) @media screen and (min-width: 900px) @media screen and (min-width: 960px) @media screen and (min-width: 1200px) @media screen and (min-width:810px) @media screen and (min-width: 1200px) @media screen and (max-width: 620px) @media screen and (max-width: 620px), print @media screen and (min-width: 480px) @media screen and (min-width: 480px) and (max-width: 620px), print @media screen and (min-width: 620px), print @media screen and (min-width: 800px), print @media screen and (min-width: 900px), print In my site, this is what I have and apart from the body image not showing if no id/class assigned, some of the rules (e.g. unfloat floated boxes) also couldn't pick up correctly @media screen and (max-device-width: 810px) { * { -webkit-text-size-adjust: 100%; } } @media screen and (min-width:810px) @media screen and (max-width:360px) @media screen and (max-width:480px) @media screen and (max-width:768px) @media screen and (max-width:1024px) @media screen and (min-width:1024px) tee On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote: > On 9/19/11 3:02 PM, tee wrote: >> Please see this. >> >> http://bit.ly/mWvfWC > > It appears to work the way I *think* you want it to if you order the > css statements as: > > @media screen and (max-width:1024px){ body { background:red} } > > @media screen and (max-width:768px) { body { background-color: black; } }/*do > not delete*/ > > @media screen and (max-width:480px) { body { background-color:olive; } }/*do > not delete*/ > > @media screen and (min-width:1024px){ body { background: blue > url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/ > > But let me know if that's an incorrect assumption :-) > > -- > Hassan Schroeder ----------------------------- has...@webtuitive.com > webtuitive design === (+1) 408-621-3445 === http://webtuitive.com > http://about.me/hassanschroeder > twitter: @hassan > dream. code. > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************