Previous Message
Next Message

FIXED - re: nav bar disappears in IE

Sent by francky on 25 March 2006 22:10


[EMAIL-REMOVED] 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-REMOVED]]
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/
Previous Message
Next Message

Message thread: