Re: [WSG] Background-Image download order
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
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 **
Re: [WSG] Background-Image download order
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
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
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
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
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
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
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
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
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 head - 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
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
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
NickGleitzman 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 head - 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]
