LinkBidScript Resources

When designing a layout for your website it is essential to check it in multiple browsers.

Few years back over 90% of web surfers were using Microsoft Internet Explorer but nowadays other browsers fast gaining share of the market. Most popular are Mozilla Fairfox and Opera.

Even Internet Explorer has released new version (IE7) which works much different from the preceding version (IE6).

Layout and styles configured to work fine in IE may appear all broken or not readable in other browsers. I can guarantee - no one will open another browser just to see your site, so you will loose potential customer.

Multiple browsers can be easily installed on your computer without any interference with exception of IE versions - you can have only one version running.

This is even more important if your site has anything to do with web design services. I know a pretty good graphic designer whose site is all messed up when viewed in Fairfox and he refuses to fix it. Than he is wondering why there is no new business and no one wants to advertise on his site…

So… Take your time to make website multi browser compatible or hire someone to do it for you - you will appreciate it later.

Have you ever noticed on some websites when you hover mouse over navigation elements it blinks for a second and after short delay it changes background image? I have been seen this a lot lately…

The problem is that some time ago most of roll-over elements were controlled by javascript which used “onLoad” command but now more and more webmasters using CSS to control roll-overs.
Background images for “hover” state are not loaded initially that is why you see this little delay - image start loading after you hover mouse over that element.

Here is a little simple trick to avoid this delay.

In the end of your page right before closing </body> tag insert code for your roll-over background image in the following format:

<img src="exact_image_path/menu_hover_image.gif" class="preload" alt="" />

where: exact_image_path - is location of your images folder and menu_hover_image.gif - is the name of background image for “hover” state of your roll-over element.

Now add this line to your CSS file:

img.preload
{
display: none;
}

That’s it!

Now these “hover” background images will load in the background while page is accessed first time and will be ready to display without delay.

The images will be pre-loading in the background so it will not affect your page loading time.
Same way you can pre-load any other images you want to have ready when particular page is accessed…

I hope you find this little tutorial helpful.