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