I have been trying to find a solution to the flash of no content I get when loading a :hover background image in a menu.

My requirement is that the text area be fluid in width, and the tabs have rounded ends. This means that I must use two background images (a left and a right)

I have tried two methods:

Method A)
I created two images, each with an Off, On, and Selected image section. Thus no preloading is needed. The idea was to position them differently for each section to show. This works great for the left image, since I position them ??px from the left. But the right end image has an undetermined (fluid) area to fill, and so it must be positioned from the RIGHT. But I don't think there is a way to do that. (I can set it to "right", but that only works for the right most of the three sections.)

Does anyone know of a way to position a background image, via CSS, referencing the RIGHT side of the element?

I know that I could easily solve this if the right side of my tabs were square, OR if the element width was fixed and equal. But neither of those are my case.

Method B)
Use three images. The Off and Selected load and display, then on "hover", the On image replaces the Off. I have tried many methods (putting them in their own <div>, cascading them in one <div>, cascading them ahead of the Off image in the actual <a>, tried no display, position -1000px, etc., etc.). None of them actually work. If you reload the page, refreshing images (Ctrl+F5) or delete cache and reload, you get a slight loading flash. This is true in IE (6, 7) as well as FF (3.5).

Here's an example that is supposedly doing this: http://divitodesign.com/dd-articles/...der/index.html

But it fails just as my attempts do.

I have read somewhere that this CSS "preloading" actually doesn't cache the images, because the DOM has not started to build yet. Can anyone confirm that?

I have also tried loading them as actual backgrounds on the same page, so I could SEE the :hover image already loaded on the page, but... on the first load and hover, the menu tab goes blank, and then loads. EVEN THOUGH the image is visible on the page. Really no different than the link I posted above...

Can ANYone explain what the deal is?

Thanks, Pete

DOHT!!

SOLVED Method A)
I didn't consider that since I have a fixed height/line-height that I should just stack them vertically. Then I call the one image position as "left 0px", "left -30px", "left -60px", and the other as "right 0px", "right -30px", "right -60px". Works perfectly.

I now have a fluid width, single image, menu background with no need for preload.

BUT... I would still like an answer to the Method B) question. This so-called CSS image preload issue has haunted me for months. It would help to in other situations as well.

Anyone...?

Update on Method B)
It seems you need to place the image in an <img> (set display to none) rather than just call it as background to some element as SO many blogs claim will work. But... that's only for IE, FF (3.5) still fails.

I tested it here: http://www.borislavdopudja.net/en/wr...ss_preloading/ IE loads the camel instantly from cache if clicked on. FF is no faster than if you Ctrl+F5. (This is a stock install of FF.)

Actually, I forgot to post in here that I discovered that FF *does* preload, but it appeared to not when refreshed w/ Ctrl+F5. Then you still get a flash (Method B) but it's NOT because the image isn't cached, it is... but for some reason it still flashes w/ Ctrl+F5. Anyone know why...? (I have learned that that is NOT the way to test fro preloading. )

I didn't consider that since I have a fixed height/line-height that I should just stack them vertically. Then I call the one image position as "left 0px", "left -30px", "left -60px", and the other as "right 0px", "right -30px", "right -60px". Works perfectly.

That method is called CSS Sprites.

Are you calling your stylesheet with an @import ??? If so, don't, use the <link> method instead.

Yeah, I realized I never used the actual term for it, after posting. My problem was that I laid them out horizontally, but have a fluid width so that won't work. I hadn't done a horizontal, fluid, CSS sprite menu before, so I didn't think it through... about one movie break later I realized I just needed to arrange them vertically. I still have to use 2 images for the fluid capability, but no need to preload, and no "funny flash" if FF is reloaded via Ctrl+F5.

Nope, I never use @import.