[EMAIL PROTECTED] wrote: >Never mind. I figured out the problem by playing with each line one-by-one. >There was a at the end of the last li after "contact" that created >the invisibility problem. I removed it and voila, the nav bar magically >reappeared. Who would have thought it would be so simple. > >Now to find a good way to get my top logo photos to load faster - a preload >perhaps? > >Thanks, >Olivia > > Hi Olivia,
1. For loading the photos faster there is a quick solution. [1] The (fixed) background you need is about 800x280px (see also below nr.3), while the images are about 960x1280 px. So cutting the rest off will save quite a lot. For instance the birchtrees2.jpg <http://www.learninks.org/leaflit/images/birchtrees2.jpg> is 260kB, when used only the needed part it will be around 56kB, that is 4.5 times as fast. See screenshot <http://home.tiscali.nl/developerscorner/css-discuss/images/birchtrees2-nw.jpg>. Also you can bring down the amount of colors to 32K (24bits) and use a jpg-compression of 20% - 30% without too much loss of quality, I think. 2. For the first (home)page the image has to be downloaded, and preloading will take the same time AFAIK. But for the next pages you can use a little css-trick. The images can be loaded invisibly in the page that is visited before. When the visitor is reading the homepage, (a part of) the header-images of the other pages can be downloaded in the background. Then they are in the browser-cache when the visitor clicks a link to the next page, and the images are quick on screen. In the stylesheet you can put: .preload { display: none; } And in the end of the html, just before the </body>tag (then the rest of the page is first on screen): <div class="preload"> <img scr="images/bubblysm.jpg" alt=""> <img scr="images/chippysm.jpg" alt=""> <img scr="images/waverock.jpg" alt=""> ... </div> (in the order you predict the visitor will click the menu-items ...) The next page you can do the same, omitting the one of the page itself, and so on. In this way, maybe not always, there is a reasonable chance that an image is already downloaded before the visitor visits the page in question. 3. Now a problem I noticed, viewing the page in Firefox. You have set the font-size of the menu and the #introduction in the fixed font-size. That is an IE-only method, the other browsers will display a larger font-size, if set so with browser font-scaling. But then the text's are coming out of the boxes. See FF in resolution 1024x786 with the font-size scaled up with 1 step: screenshot <http://home.tiscali.nl/developerscorner/css-discuss/images/leaflit-scaling.jpg>. The remedial measure will be to give no height to the #topnav and the #introduction containers. - The largest scaled font-size (you think the visitor will use) will determine the needed height for the header background-img. Greetings, francky btw, beautyfull photo's! [1] I see you did cut already the headers of the following pages. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
