[WSG] Out of Office
Hi There Please be advised that I am currently out of the office on vacation until October 10 2011. Should you have an urgent support query please email our support team at supp...@jx2.com.au For general information queries please email i...@jx2.com.au Alternatively I will be able to get back to you upon my return to the office. Best Regards *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Please see this.
http://bit.ly/mWvfWC
The reason I want to target body tag in media queries is because I don't want
to panelize mobile user to load the large background image. I started first
with min-width but the result was more problematic, so I switched to max-width.
As to the reason why there is a min-width and max-width separately for 1024px
is because I want to use a background image (no repeat-x) that fills up the
width of the desktop's screen (e.g. 2500px), and there is no reason to ask the
1024 screen resolutions' user loads this large image.
tee
On Sep 18, 2011, at 2:43 PM, Benjamin Hawkes-Lewis wrote:
On Sun, Sep 18, 2011 at 4:34 PM, tee weblis...@gmail.com wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Works for me in Chrome:
http://pastehtml.com/view/b7qe04of6.html
Do you have a testcase you can point to that fails in a named browser?
--
Benjamin Hawkes-Lewis
***
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
***
Re: [WSG] media queries can't understand body tag
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
***
Re: [WSG] media queries can't understand body tag
On 20.09.2011 00:02, tee wrote: Please see this. http://bit.ly/mWvfWC The reason I want to target body tag in media queries is because I don't want to panelize mobile user to load the large background image. I started first with min-width but the result was more problematic, so I switched to max-width. Then you should also reverse the media query sequence. Tested your page locally with reversed mq-order - min-width followed by largest max-width first, and it works fine - switched between 4 distinct backgrounds. regards Georg *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
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
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
***
Re: [WSG] media queries can't understand body tag
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
***
