Re: [WSG] Background-Image download order

2006-02-02 Thread Todd Baker
Thanks Terrence Wood, yes the nav items work with images turned off,
they have a bg color as well as an image.


Jay Gilmore, www.smh.com.au has most of their images in these files -->

http://www.smh.com.au/css/2005/img/sprite_section-strap.gif
http://www.smh.com.au/css/2005/img/sprite_li.gif

Not a bad method. Im not sure it would work for us. but its worth investigating.

Thanks for everyones input.
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Jay Gilmore






Nick Gleitzman wrote:

On 2 Feb 2006, at 1:24 PM, Ric Raftis wrote:
  
  
  Nick Gleitzman wrote:


 Boring, but multiple CSS files, one for
each page, containing only the bg image declarations for that page.
  
  

Maybe I've missed something, but why wouldn't you just have the one css
file but declare the background image in the head section of each
individual page?

  
  
You could, of course, but I use external files for the same reason that
I don't include the whole CSS file in the  - separation of
of content and presentation.
  
  

What about SSI or PHP. I have used this for conditional class
application in navigations I don't see why you couldn't use it for
applying to stylesheet insertion. For navigation where I use image
replacement I use a single image and use the background image
positioning to handle the various states. This way the whole nav loads
at the same time and there is no need for _javascript_ preloads. 

This makes me think that I should put all my background images on one
image for an entire site. That might be a cool experiment. Has any one
tried this?

Jay



Jay Gilmore

U)SmashingRed Web & Marketing
B)Jay Gilmore's SmashingRed
Blog
P) 902.529.0651
E) [EMAIL PROTECTED]






Re: [WSG] Background-Image download order

2006-02-01 Thread Nick Gleitzman


On 2 Feb 2006, at 1:18 PM, kvnmcwebn wrote:



nick
"
Bear this in mind, too - some browsers will call *all* images specified
with the background property in your CSS file, whether they're needed
for that page or not."

errr..
what browsers?


Safari, from memory... it was a while ago. Later versions may have seen 
a fix. Sorry, don't have time to test right now...


I wonder what would happen if the seperate stylesheets were alled 
called in

from one "importer" stylesheet? would that make any sense?


Uh - wouldn't that result in the same problem? If a browser reads a CSS 
file, it will process all the other files called by it - won't it?


N
___
Omnivision. Websight.
http://www.omnivision.com.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Terrence Wood
Todd Baker said:
> We are finding that the background images for our main navigation are
> downloading last and as such the white text is unreadable

This makes for quite a usability issue. Is there any way you can revisit
the design to ensure the text is visible with images turned off or not
downloaded?

Or if it's just a case of fixing the anchor color then supply a background
color for just that element. The browser will render the specified
background color and place the image over the top of it when it is
downloaded.

EXAMPLE
a {background: #000 url(image.gif); color: #fff}

> Is there any logic I can apply (ordering CSS etc) that will affect the
> order the browser requests and downloads background images?

Not that I'm aware of... I always thought it was something magical that
browsers and servers worked out amongst themselves to in order to make
best use of the available packets and minimise requests.

kind regards
Terrence Wood.






**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Nick Gleitzman


On 2 Feb 2006, at 1:24 PM, Ric Raftis wrote:


Nick Gleitzman wrote:

 Boring, but multiple CSS files, one for each page, containing only 
the bg image declarations for that page.


Maybe I've missed something, but why wouldn't you just have the one 
css file but declare the background image in the head section of each 
individual page?


You could, of course, but I use external files for the same reason that 
I don't include the whole CSS file in the  - separation of of 
content and presentation.


N
___
Omnivision. Websight.
http://www.omnivision.com.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



RE: [WSG] Background-Image download order

2006-02-01 Thread kvnmcwebn

nick
"
Bear this in mind, too - some browsers will call *all* images specified
with the background property in your CSS file, whether they're needed
for that page or not."

errr..
what browsers?

I wonder what would happen if the seperate stylesheets were alled called in
from one "importer" stylesheet? would that make any sense?

kvnmcwebn


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Ric Raftis

Nick Gleitzman wrote:

 Boring, but multiple CSS files, one for each page, containing only 
the bg image declarations for that page.


Maybe I've missed something, but why wouldn't you just have the one css 
file but declare the background image in the head section of each 
individual page?


Regards,

Ric
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Nick Gleitzman

Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?


Bear this in mind, too - some browsers will call *all* images specified 
with the background property in your CSS file, whether they're needed 
for that page or not. I fell foul of this one, and was wondering why my 
first page was taking ges to render. The solution? Boring, but 
multiple CSS files, one for each page, containing only the bg image 
declarations for that page.


HTH...

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Lea de Groot

On 02/02/2006, at 9:59 AM, Todd Baker wrote:

We are finding that the background images for our main navigation are
downloading last and as such the white text is unreadable untill the
background arrives .. almost last. The list that drives this is right
at the topm of the source code.


I've always found the download order somewhat unpredictable,  
particularly cross-browser. Generally the image you want most drops  
in last (I think its related to that butter and bread falling thing)


Just to be a naysayer, have you given consideration to the  
accessability issues of background images being Important?
Derek Featherstone's "CSS Background Images: Naughty or Nice?"  
discusses it nicely.
http://24ways.org/advent/naughty-or-nice-css-background-images (Hi  
Derek!)

Hope that doesn't make you scream too much :)

Lea
--
Lea de Groot
Brisbane, Australia
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Paul Novitski

At 03:59 PM 2/1/2006, Todd Baker wrote:

Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?



Todd,

I'll be interested to see if anyone has any constructive suggestions 
to contribute toward this universal issue.


One might assume that images are requested from the server in the 
order they appear in markup and that markup's styling, but one might 
also be dead wrong...  Browsers undoubtedly differ in the strategies 
they use.  From watching the way pages render, I figure that multiple 
images download simultaneously, so that for example a large image can 
begin downloading before a small image but finish last.  With this in 
mind, I'd look closely at the image file sizes you're working with 
and do your best to minimize the size of images you want to appear 
first, in addition to placing them earlier in the markup.


How to force the situation?  Well, I suppose you could duplicate the 
background image as a foreground  first thing on the page so it 
would theoretically begin downloading first; the background image 
would therefore draw from cache.  I can think of a couple of ways to 
style the foreground image so that it would download but wouldn't 
show, such as positioning it absolutely and giving it a large negative left.


Background images don't display progressively, so it wouldn't help to 
save the image file for progressive display -- in fact, it would 
hinder since making it progressive would inflate its file size.


If you really wanted to display the image progressively -- or if you 
decided that foreground images began downloading before background 
images -- you could mark up the image as a foreground  and 
z-index it beneath your menu instead of styling it as a 
background.  Disadvantages: it would be one more vulnerability in 
your layout, and it wouldn't be able to tile automatically; however 
you could, if appropriate, size it in ems or percentages which we 
can't do with CSS backgrounds.


Good luck, and let me know if you come up with a solid solution.

Paul 


**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Lachlan Hunt

Todd Baker wrote:

On 02/02/06, Lachlan Hunt <[EMAIL PROTECTED]> wrote:

You're assuming the background image will arrive.  What happens if
someone has images turned off?  You should specify a background colour
as well.


Yes indeed we are adding a background colour that its "close" to the graphic.


But you stated that the text is unreadable until the text arrives.  The 
background colour is obviously not suitable.



Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?

Browsers would likely request images in the order that they are
required, though there is no guarantee of this.  If the markup for the
navigation appears last in the markup, then due to incremental
rendering, it is likely that the images required to render it will be
downloaded near the end.  If it's at the top of the markup, then it
seems logical that it would be downloaded near the beginning.


Thats what I would of thought but the list for this nav is right at the top..


Is there a URI so that we may see the page and this effect occurring?

--
Lachlan Hunt
http://lachy.id.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Todd Baker
On 02/02/06, Lachlan Hunt <[EMAIL PROTECTED]> wrote:
> You're assuming the background image will arrive.  What happens if
> someone has images turned off?  You should specify a background colour
> as well.
>

Yes indeed we are adding a background colour that its "close" to the graphic.

> > Is there any logic I can apply (ordering CSS etc) that will affect the
> > order the browser requests and downloads background images?
>
> Browsers would likely request images in the order that they are
> required, though there is no guarantee of this.  If the markup for the
> navigation appears last in the markup, then due to incremental
> rendering, it is likely that the images required to render it will be
> downloaded near the end.  If it's at the top of the markup, then it
> seems logical that it would be downloaded near the beginning.

Thats what I would of thought but the list for this nav is right at the top..

Thanks
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Joshua Street
For the navigation, you can put all your nav images into the one file
so that they all load at once, then use background-position to make
them sit in place.

As for making things readable before the background images download,
how about setting a background colour as well? That way if users have
images disabled (dialup users, etc.) they can still read your primary
navigation. This will obviously only work if you're not dependent on
the background being partially transparent for the nav.

Josh

On 2/2/06, Todd Baker <[EMAIL PROTECTED]> wrote:
> Hello Everyone,
>
> We are in final testing for a largish site that uses a large amount of
> background images for navigation and various graphical effects (as all
> CSS-based sites do).
>
> We are finding that the background images for our main navigation are
> downloading last and as such the white text is unreadable untill the
> background arrives .. almost last. The list that drives this is right
> at the topm of the source code.
>
> Is there any logic I can apply (ordering CSS etc) that will affect the
> order the browser requests and downloads background images?
>
> Cheers
>
> Todd
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Alexander Todorenko
So you're saying that if images are disabled in the browser you
navigation becomes invisible? Can you add a background color so the
nav is readable before the images load?

Alex

On 2/2/06, Todd Baker <[EMAIL PROTECTED]> wrote:
> Hello Everyone,
>
> We are in final testing for a largish site that uses a large amount of
> background images for navigation and various graphical effects (as all
> CSS-based sites do).
>
> We are finding that the background images for our main navigation are
> downloading last and as such the white text is unreadable untill the
> background arrives .. almost last. The list that drives this is right
> at the topm of the source code.
>
> Is there any logic I can apply (ordering CSS etc) that will affect the
> order the browser requests and downloads background images?
>
> Cheers
>
> Todd
> **
> The discussion list for  http://webstandardsgroup.org/
>
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
>
>
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**



Re: [WSG] Background-Image download order

2006-02-01 Thread Lachlan Hunt

Todd Baker wrote:

We are finding that the background images for our main navigation are
downloading last and as such the white text is unreadable untill the
background arrives


You're assuming the background image will arrive.  What happens if 
someone has images turned off?  You should specify a background colour 
as well.



Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?


Browsers would likely request images in the order that they are 
required, though there is no guarantee of this.  If the markup for the 
navigation appears last in the markup, then due to incremental 
rendering, it is likely that the images required to render it will be 
downloaded near the end.  If it's at the top of the markup, then it 
seems logical that it would be downloaded near the beginning.


--
Lachlan Hunt
http://lachy.id.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**



[WSG] Background-Image download order

2006-02-01 Thread Todd Baker
Hello Everyone,

We are in final testing for a largish site that uses a large amount of
background images for navigation and various graphical effects (as all
CSS-based sites do).

We are finding that the background images for our main navigation are
downloading last and as such the white text is unreadable untill the
background arrives .. almost last. The list that drives this is right
at the topm of the source code.

Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?

Cheers

Todd
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**