Previous Message
Next Message

FIXED - re: nav bar disappears in IE

Sent by francky on 25 March 2006 22:10


>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 
Hi Olivia,

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 
<> is 260kB, when 
used only the needed part it will be around 56kB, that is 4.5 times as 
fast. See screenshot 
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.

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="">
(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.

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 
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.


btw, beautyfull photo's!

I see you did cut already the headers of the following pages.
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: