Re: [WSG] media queries can't understand body tag

2011-10-05 Thread Frances de Waal
Sorry, I missed the replies in this thread, I didn't intend to be unresponsive. 
Indeed it is only Safari as far as I can see that loads all the background 
images at once, but that seems to include also iOS, so quite a big group of 
mobile users. Maybe this will be improved in iOS 5.

Bye,
Frances 

www.waalweb.nl
www.smartscripts.nl
Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver
WaalWeb | Halfweg, Noord-Holland | KvK 34350833

Op 27 sep 2011, om 23:33 heeft Hassan Schroeder het volgende geschreven:

 On 9/27/11 1:42 PM, Frances de Waal wrote:
 
 As far as I know all the stylesheets ánd all the linked resources in them 
 like background-images
 will be loaded with meadia-queries. So I am afraid that the large background 
 image that you try
 to avoid for mobiles, will be loaded anyway as long as you try to solve this 
 with media-queries.
 
 What are you basing this on?
 
 A quick test in Chrome and Firefox on OS X and Chrome on an old G1
 Android phone, at least, shows that *not* to be true; a background
 image is only loaded for the rule that matches the applicable media-
 query. You can watch the logs (or developer console) and see other
 images fetched as you resize the browser.
 
 What browsers/platforms have you tested where this doesn't work?
 
 -- 
 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

2011-09-29 Thread Teddy Knoy
My name is Ted Knoy and I have been receiving your company's e-mail for some
time.  I assume that this is confidential company information so I don't
understand why I have been receiving your e-mail for nearly two months now.
You should report this to Google or change your e-mail settings.



On Thu, Sep 29, 2011 at 11:50 AM, tee weblis...@gmail.com wrote:

 Hi Hassan,

 Thank you for your patient. I did figure it after my post, from xcode's web
 inspector, a feature I never used before until today.

 From the this inspector I could see the difference from the one from
 Safari.

 Some people are kind and patience by nature (you), some never afraid to
 show his stupidity and ignorance publicly (I'm talking about myself), and
 some are snarky by nature, which is David :-) Luckily the world is big
 enough to for everyone.

 Tee


 On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote:

 
   but I have never seen an article that tells how you can test what
   elements get loaded in the mobile Safari
 
  Maybe the third time's the charm --
 
  Set up your test page and access it from your iOS device while
  *watching the server log*. Did the device request the image in
  question or not?
 
  Is there something confusing or ambiguous about that?
 
  --


 ***
 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

2011-09-29 Thread Tom Livingston
Unsubscribe link is in the footer.

Sent from my iPhone

On Sep 29, 2011, at 2:46 AM, Teddy Knoy tedk...@gmail.com wrote:

 My name is Ted Knoy and I have been receiving your company's e-mail for some 
 time.  I assume that this is confidential company information so I don't 
 understand why I have been receiving your e-mail for nearly two months now.  
 You should report this to Google or change your e-mail settings.
 
 
  
 On Thu, Sep 29, 2011 at 11:50 AM, tee weblis...@gmail.com wrote:
 Hi Hassan,
 
 Thank you for your patient. I did figure it after my post, from xcode's web 
 inspector, a feature I never used before until today.
 
 From the this inspector I could see the difference from the one from Safari.
 
 Some people are kind and patience by nature (you), some never afraid to show 
 his stupidity and ignorance publicly (I'm talking about myself), and some are 
 snarky by nature, which is David :-) Luckily the world is big enough to for 
 everyone.
 
 Tee
 
 
 On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote:
 
 
   but I have never seen an article that tells how you can test what
   elements get loaded in the mobile Safari
 
  Maybe the third time's the charm --
 
  Set up your test page and access it from your iOS device while
  *watching the server log*. Did the device request the image in
  question or not?
 
  Is there something confusing or ambiguous about that?
 
  --
 
 
 ***
 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
 ***


***
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

2011-09-29 Thread David Laakso




I did figure it after my post, from xcode's web inspector, a feature I never 
used before until today.


Tee





Care to share what you found out?
Thanks.

~d



--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
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

2011-09-29 Thread tee
If you have SDKs, you can open Dashcode, create a page for Mobile Safari and 
check the resource log. There is also Browser simulator but this one for both 
desktop and mobile I think. 

Still exploring so not fully sure what I see is exactly correct.


Trying to figure all these another question has arisen. Take iPad for example 
which supports portrait and landscape, so if I have two separate images target 
for the two, doesn't it load two images? Say, I first view a page from 
landscape and this loads the image from it media query, then I switch to 
portrait, it loads the image from its media query, when it does, the one from 
landscape has already been loaded so it won't just magically gone when I am 
still at the portrait right?

If I'm driving anybody crazy, some comfort for you: I am alredy driving myself 
crazy, so you are just offloading the craziness from me. The craziness you 
thought from my question isn't from my question actually.

tee

On Sep 29, 2011, at 9:37 AM, David Laakso wrote:

 
 
 I did figure it after my post, from xcode's web inspector, a feature I never 
 used before until today.
 
 
 Tee
 
 
 
 
 Care to share what you found out?
 Thanks.
 
 ~d
 



***
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

2011-09-29 Thread Tom Livingston
I would just add orientation to your queries and show/hide the right one with 
the orientation change. 

Sent from my iPhone

On Sep 29, 2011, at 5:28 PM, tee weblis...@gmail.com wrote:

 If you have SDKs, you can open Dashcode, create a page for Mobile Safari and 
 check the resource log. There is also Browser simulator but this one for both 
 desktop and mobile I think. 
 
 Still exploring so not fully sure what I see is exactly correct.
 
 
 Trying to figure all these another question has arisen. Take iPad for example 
 which supports portrait and landscape, so if I have two separate images 
 target for the two, doesn't it load two images? Say, I first view a page from 
 landscape and this loads the image from it media query, then I switch to 
 portrait, it loads the image from its media query, when it does, the one from 
 landscape has already been loaded so it won't just magically gone when I am 
 still at the portrait right?
 
 If I'm driving anybody crazy, some comfort for you: I am alredy driving 
 myself crazy, so you are just offloading the craziness from me. The craziness 
 you thought from my question isn't from my question actually.
 
 tee
 
 On Sep 29, 2011, at 9:37 AM, David Laakso wrote:
 
 
 
 I did figure it after my post, from xcode's web inspector, a feature I 
 never used before until today.
 
 
 Tee
 
 
 
 
 Care to share what you found out?
 Thanks.
 
 ~d
 
 
 
 
 ***
 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

2011-09-29 Thread David Laakso

On 9/29/11 5:28 PM, tee wrote:

Trying to figure all these another question has arisen. Take iPad for example 
which supports portrait and landscape, so if I have two separate images target 
for the two, doesn't it load two images? Say, I first view a page from 
landscape and this loads the image from it media query, then I switch to 
portrait, it loads the image from its media query, when it does, the one from 
landscape has already been loaded so it won't just magically gone when I am 
still at the portrait right?


tee




Keep it simple. Granted, this is far easier said than done, and god 
knows I am not good at it, either. But when push comes to shove, any 
site that requires anything beyond basic readability and functionality 
for its success [such as a decorative background image] -- regardless of 
whether it is viewed on desktop, laptop, tablet, or mobile  -- is in 
deep trouble.


Best,
~d


--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
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

2011-09-28 Thread tee
By the way, the other day I stumble on this adaptive images script.  It works 
better for CMS system.

http://adaptive-images.com/

Tee
On Sep 27, 2011, at 10:42 PM, Hassan Schroeder wrote:

 On 9/27/11 8:44 PM, Tom Livingston wrote:
 David, with nothing but mobile Safari, if I hit a page with multiple
  queries or an element specced as display:none but has a bg image, how
  to you *verify* that an unwanted image loads anyway or not?
 
 As I said in my original email: set up a test page on one of your
 servers and tail the appropriate log file; you can see when images
 are fetched.
 
 The original question was about media queries, not elements set to
 `display: none`, but the same method should work.
 
 -- 
 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

2011-09-28 Thread tee
 
 
 With Android/2.2.2 [low-end touch screen] there is a horizontal yellow 
 loading bar above the address bar-- it begins at the left rail and moves to 
 the right rail. Opera Mobile and OperaMini on Android both have a circular 
 whirling gizzmo loading button [same on a low-end SanyoMirro]. 
 

But it's iOS Safari that some people were talking that loads all images, not 
Andriod, not Opera Mini.

So if I have 

main style sheet

body {background : url(bg-img.png)  }


then this

@media screen and (max-width:768px){ body { background:gray 
url(bg-bodytop-768.jpg) no-repeat left center} } 



 iOS Safari does load two images this is how I always understood it, but if I 
target images in the media queries than no extra bg image will be loaded and 
this is what I learned later from Ethan Marcotte's book, but I have never seen 
an article that tells how you can test what elements get loaded in the mobile 
Safari (I don't think it's accurate seeing it from a simulator or Desktop 
version of Safari). In his book, he didn't give a clear demostration either but 
this:

First, we’re setting a background image on the .blog ele- ment. (Specifically, 
the two-toned blog-bg.png graphic we used in Chapter 2 to create the illusion 
of two columns.) Then for smaller displays, those narrower than 768px wide, 
we’re instead placing a simple tiled GIF on the blog element, since we’ve 
linearized the display of those narrower pages.
The problem with this approach is that some small screen browsers, most notably 
Mobile Safari on the iPhone and the iPad, will actually download both graphics, 
even if only one is ultimately applied to the page. While smaller screens don’t 
always equate to lower bandwidth, we’re currently punishing users on smaller 
screens with the download of a much heavier image than they’ll ever see.
Thankfully, these aren’t problems with responsive design in and of itself—we 
just need to rethink the way we’ve imple- mented it.

In fact, I took this approach on my personal portfolio site 
(http://ethanmarcotte.com). By default, the content is arranged in a very 
linear manner, one friendly to mobile devices and narrow browser windows (Fig 
5.12). But as the viewport wid- ens, the grid becomes more complex and more 
asymmetrical (Fig 5.13). And at the highest end of the spectrum, the “full” 
design finally reveals itself: the layout becomes even more complex, and some 
heavier assets, like that big abstract back- ground image, are introduced (Fig 
5.14).


And this is all I learned that images that are placed in media queries won't 
get loaded twice, or all.


Using Safari's Web Inspector I see 4 bg images were loaded in my previouis 
example.

tee





***
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

2011-09-28 Thread Hassan Schroeder


 but I have never seen an article that tells how you can test what
 elements get loaded in the mobile Safari

Maybe the third time's the charm --

Set up your test page and access it from your iOS device while
*watching the server log*. Did the device request the image in
question or not?

Is there something confusing or ambiguous about that?

--
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

2011-09-28 Thread David Laakso

On 9/28/11 8:27 PM, Hassan Schroeder wrote:



Maybe the third time's the charm --





Oh, easy for Leonardo!

-- Dylan Thomas


--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
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

2011-09-28 Thread tee
Hi Hassan,

Thank you for your patient. I did figure it after my post, from xcode's web 
inspector, a feature I never used before until today.

From the this inspector I could see the difference from the one from Safari.

Some people are kind and patience by nature (you), some never afraid to show 
his stupidity and ignorance publicly (I'm talking about myself), and some are 
snarky by nature, which is David :-) Luckily the world is big enough to for 
everyone.

Tee


On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote:

 
  but I have never seen an article that tells how you can test what
  elements get loaded in the mobile Safari
 
 Maybe the third time's the charm --
 
 Set up your test page and access it from your iOS device while
 *watching the server log*. Did the device request the image in
 question or not?
 
 Is there something confusing or ambiguous about that?
 
 --


***
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

2011-09-27 Thread Frances de Waal
Hi Tee,

As far as I know all the stylesheets ánd all the linked resources in them like 
background-images will be loaded with meadia-queries. So I am afraid that the 
large background image that you try to avoid for mobiles, will be loaded anyway 
as long as you try to solve this with media-queries.

Bye,
Frances 

www.waalweb.nl
www.smartscripts.nl
Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver
WaalWeb | Halfweg, Noord-Holland | KvK 34350833

Op 20 sep 2011, om 00:02 heeft tee het volgende geschreven:

 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
 ***
 



***
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

2011-09-27 Thread Hassan Schroeder

On 9/27/11 1:42 PM, Frances de Waal wrote:


As far as I know all the stylesheets ánd all the linked resources in them like 
background-images
will be loaded with meadia-queries. So I am afraid that the large background 
image that you try
to avoid for mobiles, will be loaded anyway as long as you try to solve this 
with media-queries.


What are you basing this on?

A quick test in Chrome and Firefox on OS X and Chrome on an old G1
Android phone, at least, shows that *not* to be true; a background
image is only loaded for the rule that matches the applicable media-
query. You can watch the logs (or developer console) and see other
images fetched as you resize the browser.

What browsers/platforms have you tested where this doesn't work?

--
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

2011-09-27 Thread Tom Livingston
I believe that Safari may be the browser with the 'loads anyway' problem.

Sent from my iPhone

On Sep 27, 2011, at 5:33 PM, Hassan Schroeder has...@webtuitive.com wrote:

 On 9/27/11 1:42 PM, Frances de Waal wrote:
 
 As far as I know all the stylesheets ánd all the linked resources in them 
 like background-images
 will be loaded with meadia-queries. So I am afraid that the large background 
 image that you try
 to avoid for mobiles, will be loaded anyway as long as you try to solve this 
 with media-queries.
 
 What are you basing this on?
 
 A quick test in Chrome and Firefox on OS X and Chrome on an old G1
 Android phone, at least, shows that *not* to be true; a background
 image is only loaded for the rule that matches the applicable media-
 query. You can watch the logs (or developer console) and see other
 images fetched as you resize the browser.
 
 What browsers/platforms have you tested where this doesn't work?
 
 -- 
 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

2011-09-27 Thread Hassan Schroeder

On 9/27/11 3:33 PM, Tom Livingston wrote:

I believe that Safari may be the browser with the 'loads anyway' problem.


Safari is a Webkit-based browser like Chrome, so I expect them to
behave pretty identically, but, for the record: just tested Safari
5.1 (OS X) and it also does *not* load all the background images,
only the media-query-specified one.

--
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

2011-09-27 Thread Tom Livingston
I believe it's the iOS Safari with the issue, where it would be most 
troublesome. Not sure how to test this.

Sent from my iPhone

On Sep 27, 2011, at 7:08 PM, Hassan Schroeder has...@webtuitive.com wrote:

 On 9/27/11 3:33 PM, Tom Livingston wrote:
 I believe that Safari may be the browser with the 'loads anyway' problem.
 
 Safari is a Webkit-based browser like Chrome, so I expect them to
 behave pretty identically, but, for the record: just tested Safari
 5.1 (OS X) and it also does *not* load all the background images,
 only the media-query-specified one.
 
 -- 
 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

2011-09-27 Thread tee
So iOS Safari loads 4 bg images in this case?


@media screen and (max-width:480px){ body { background:olive 
url(bg-bodytop-480.jpg) no-repeat left -50px} } 


@media screen and (max-width:768px){ body { background:gray 
url(bg-bodytop-768.jpg) no-repeat left center} } 


@media screen and (max-width:1024px){ body { background:blue 
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} } 


@media screen and (max-width:1024px){ body { background:blue 
url(bg-bodytop-1024.jpg) no-repeat left 20px} }


tee


On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:

 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.



***
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

2011-09-27 Thread Tom Livingston
I'm not 100% sure, but I believe so, yes. I was just brow-beaten
offlist by someone because of my reply below. YES, I have an iPhone,
but what I don't know is how to test - with JUST iOS Safari - whether
of not a bg image is downloaded to Safari. I'd be glad to test it for
you, if you can tell me how to confirm it.

On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
 So iOS Safari loads 4 bg images in this case?


 @media screen and (max-width:480px){ body { background:olive 
 url(bg-bodytop-480.jpg) no-repeat left -50px} }


 @media screen and (max-width:768px){ body { background:gray 
 url(bg-bodytop-768.jpg) no-repeat left center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1024.jpg) no-repeat left 20px} }


 tee


 On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:

 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.



 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***





-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com


***
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

2011-09-27 Thread Tom Livingston
Actually, the way you have this, I think it will work. If you had
something in your base styles, or in the first media query that was
set to display:none with a bg image, then that may get downloaded
anyway. Again, tell me how to check and i'll be glad to test it for
you.

On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
 I'm not 100% sure, but I believe so, yes. I was just brow-beaten
 offlist by someone because of my reply below. YES, I have an iPhone,
 but what I don't know is how to test - with JUST iOS Safari - whether
 of not a bg image is downloaded to Safari. I'd be glad to test it for
 you, if you can tell me how to confirm it.

 On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
 So iOS Safari loads 4 bg images in this case?


 @media screen and (max-width:480px){ body { background:olive 
 url(bg-bodytop-480.jpg) no-repeat left -50px} }


 @media screen and (max-width:768px){ body { background:gray 
 url(bg-bodytop-768.jpg) no-repeat left center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1024.jpg) no-repeat left 20px} }


 tee


 On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:

 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.



 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***





 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com


***
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

2011-09-27 Thread tee
Hi Tom,

Thank you. I don't know how to check it either, I have iPad and iPod, so would 
like to learn how to check too.

Used to think browsers load all bg images even with display none declared, and 
one of the reasons I wanted to try out the min/max width approach this time is 
because I (thought) read it from Responsive Web Design ebook by Ethan Marcotte, 
that by targeting the rules in the media queries it prevent browers from 
loading unnecessary rules. But I can't find this important peice of info from 
the book with a quick search just now.


tee


On Sep 27, 2011, at 7:02 PM, Tom Livingston wrote:

 Actually, the way you have this, I think it will work. If you had
 something in your base styles, or in the first media query that was
 set to display:none with a bg image, then that may get downloaded
 anyway. Again, tell me how to check and i'll be glad to test it for
 you.
 
 On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
 I'm not 100% sure, but I believe so, yes. I was just brow-beaten
 offlist by someone because of my reply below. YES, I have an iPhone,
 but what I don't know is how to test - with JUST iOS Safari - whether
 of not a bg image is downloaded to Safari. I'd be glad to test it for
 you, if you can tell me how to confirm it.
 
 On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
 So iOS Safari loads 4 bg images in this case?
 
 
 @media screen and (max-width:480px){ body { background:olive 
 url(bg-bodytop-480.jpg) no-repeat left -50px} }
 
 
 @media screen and (max-width:768px){ body { background:gray 
 url(bg-bodytop-768.jpg) no-repeat left center} }
 
 
 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
 
 
 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1024.jpg) no-repeat left 20px} }
 
 
 tee
 
 
 On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
 
 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 
 
 
 
 
 --
 
 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 
 
 
 
 -- 
 
 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 
 
 ***
 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

2011-09-27 Thread Tom Livingston
I have that as well. I believe with the approach you have - mobile
first, ala 320andup (http://stuffandnonsense.co.uk/projects/320andup/)
- you don't put anything on the page (or in the style) for mobile
unless you really want it there and loading. As opposed to using media
queries to go from desktop to mobile and turning off what you don't
want to show on mobile. Admittedly, I have done this a couple times,
but they were small overhead sites.

On Tue, Sep 27, 2011 at 10:29 PM, tee weblis...@gmail.com wrote:
 Hi Tom,

 Thank you. I don't know how to check it either, I have iPad and iPod, so 
 would like to learn how to check too.

 Used to think browsers load all bg images even with display none declared, 
 and one of the reasons I wanted to try out the min/max width approach this 
 time is because I (thought) read it from Responsive Web Design ebook by Ethan 
 Marcotte, that by targeting the rules in the media queries it prevent browers 
 from loading unnecessary rules. But I can't find this important peice of info 
 from the book with a quick search just now.


 tee


 On Sep 27, 2011, at 7:02 PM, Tom Livingston wrote:

 Actually, the way you have this, I think it will work. If you had
 something in your base styles, or in the first media query that was
 set to display:none with a bg image, then that may get downloaded
 anyway. Again, tell me how to check and i'll be glad to test it for
 you.

 On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
 I'm not 100% sure, but I believe so, yes. I was just brow-beaten
 offlist by someone because of my reply below. YES, I have an iPhone,
 but what I don't know is how to test - with JUST iOS Safari - whether
 of not a bg image is downloaded to Safari. I'd be glad to test it for
 you, if you can tell me how to confirm it.

 On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
 So iOS Safari loads 4 bg images in this case?


 @media screen and (max-width:480px){ body { background:olive 
 url(bg-bodytop-480.jpg) no-repeat left -50px} }


 @media screen and (max-width:768px){ body { background:gray 
 url(bg-bodytop-768.jpg) no-repeat left center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }


 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1024.jpg) no-repeat left 20px} }


 tee


 On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:

 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.



 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***





 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com


 ***
 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
 ***





-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com


***
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

2011-09-27 Thread David Laakso

On 9/27/11 10:29 PM, tee wrote:

Hi Tom,

Thank you. I don't know how to check it either, I have iPad and iPod, so would 
like to learn how to check too.



tee





Not terribly scientific but simply clear the cache on the iPad and the 
iPhone and view the page. You'll know whether it is loading in either or 
both devices.


~d





--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
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

2011-09-27 Thread Tom Livingston
David, with nothing but mobile Safari, if I hit a page with multiple queries or 
an element specced as display:none but has a bg image, how to you *verify* that 
an unwanted image loads anyway or not? There's no inspector that I'm aware of 
like desktop version. 

Sent from my iPhone

On Sep 27, 2011, at 11:23 PM, David Laakso da...@chelseacreekstudio.com wrote:

 On 9/27/11 10:29 PM, tee wrote:
 Hi Tom,
 
 Thank you. I don't know how to check it either, I have iPad and iPod, so 
 would like to learn how to check too.
 
 
 
 tee
 
 
 
 
 Not terribly scientific but simply clear the cache on the iPad and the iPhone 
 and view the page. You'll know whether it is loading in either or both 
 devices.
 
 ~d
 
 
 
 
 
 -- 
 Desktop. Laptop. Tablet. Mobile!
 http://chelseacreekstudio.com/
 
 
 
 ***
 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

2011-09-27 Thread David Laakso

On 9/27/11 11:44 PM, Tom Livingston wrote:

David, with nothing but mobile Safari, if I hit a page with multiple queries or 
an element specced as display:none but has a bg image, how to you *verify* that 
an unwanted image loads anyway or not? There's no inspector that I'm aware of 
like desktop version.

Sent from my iPhone




With Android/2.2.2 [low-end touch screen] there is a horizontal yellow 
loading bar above the address bar-- it begins at the left rail and moves 
to the right rail. Opera Mobile and OperaMini on Android both have a 
circular whirling gizzmo loading button [same on a low-end SanyoMirro]. 
I had an iPhone several years ago but have forgotten what it used to 
display downloading. I am sure there  is a more scientific method than 
watching[timing] the loading gizzmo-- just don't know what it is. And 
either way, I did not memorize Tee's page address, and don't have time 
to look it up, or I'd check that page on my handset...


~d

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
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

2011-09-27 Thread Hassan Schroeder

On 9/27/11 8:44 PM, Tom Livingston wrote:

David, with nothing but mobile Safari, if I hit a page with multiple

 queries or an element specced as display:none but has a bg image, how
 to you *verify* that an unwanted image loads anyway or not?

As I said in my original email: set up a test page on one of your
servers and tail the appropriate log file; you can see when images
are fetched.

The original question was about media queries, not elements set to
`display: none`, but the same method should work.

--
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

2011-09-19 Thread tee
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

2011-09-19 Thread Hassan Schroeder

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

2011-09-19 Thread G.Sørtun

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

2011-09-19 Thread tee
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

2011-09-19 Thread tee
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
***



[WSG] media queries can't understand body tag

2011-09-18 Thread tee
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?

Tee

***
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

2011-09-18 Thread Chad Kelly

Call the other media such as print from an external style sheet.
That should fix the issue.

On 9/19/2011 1:34 AM, tee 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?

Tee

***
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

2011-09-18 Thread Benjamin Hawkes-Lewis
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
***



Re: [WSG] media queries can't understand body tag

2011-09-18 Thread David Laakso

On 9/18/11 5:43 PM, Benjamin Hawkes-Lewis wrote:

On Sun, Sep 18, 2011 at 4:34 PM, teeweblis...@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





No issue  [the background is lime] in 
http://pastehtml.com/view/b7qe04of6.html  in Mac OS X 10.4.11:

Safari/4.1.3
Opera/11.11
FF/3.6.22
WebKit/4.1.3 (4533.19.4, r63031)
Camino/2.1b1 (1.9.2.20pre 20110725195938)

~d


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***