With this post, I just wanted to forward you to two good solutions of horizontal drop-down menus that I have been trying out. They both work fine in all browsers that I have tested and really solves your the potential problems you might bump into.

There are probably tons of these solutions but I have tried two that I know work very well and that are both pretty easy to customize and that work well with different browsers and operating systems.

The so-called ultimate drop down menu from Stu Nicholls on CSSplay was something I tried out about a year ago. At that time it felt a little bit messy codewise. But if you know you CSS it shouldn't be a problem. So I recommend that one and it seems as if Stu has put quite some effort in doing his menus over the years as well.

The other menu is the one from Sperling.com. If you follow his instructions and just put the menu on a page it should work well on anything.

To say that it's easy to customize is not entirely true though. I have spent quite some hours on customizing them to further fit the way I want them to. For example, if you have some advanced positioning CSS on your site yourself and this probably includes both solutions, there might be implications for different browsers that you have to deal with anyway.
I wanted a centralized menu both in vertical and horizontal in nested divs. This caused the menu not quite appearing where I wanted it to. Now, to be clear, this is probably caused by my own CSS that lacks some functionality and that adds its bad behaviour further on to the menu.

These are solutions that work though if you ignore for example Internet Explorer below version 6 that are hardly used anymore. Further on, both menus have functionality for drop down in two steps which is great. If you are using any of them for a proft yourself, please consider donating to them as usual.

Have you considered by the way the various way that Internet Explorer's versions renders code? Internet Explorer 8 seems to follow the standards for a change and renders more like Firefox and Chrome, while Internet Explorer 7 and 6 render completely differently. I am just longing for a time when browsers all follow the same standards.

An old way of creating links on an image is the use of the area tag. This way the image is located directly on the page though and is not a background image.

It's common to use a background image in a table, div or something else and then put other html like text, links, table, lists and so on on top of it. If you need to put links on specific places on the background image you could accomplish this with some css.

The image below is a background image in a div. The red and green squares are different linked areas.

Here is the code. First the html:

<a href="http://www.google.com" title="Google"><div class="link1"></div></a><a href="http://www.ibm.com" title="IBM"><div class="link2"></div></a> <div class="bg1"></div>

And the css looks like this:

.bg1 { background: url(http://www.wohill.com/images/pel.jpg) no-repeat; height:226px; width:140px; } .link1 { /*background-color:#FF0000;*/ border:thin dotted #FF0000; position:absolute; width:25px; height:25px; margin:25px 0px 0px 10px; } .link2 { border:thin dashed #00FF00; position: absolute; width: 40px; height:80px; margin: 60px 0px 0px 80px; }

As you can see the two link divs are located just above the div with the background image and these are positioned absolutely in relation to that div. Each link div gets a width and height. The margin attribute specifies where on the background image div the link div is placed.

I wrote a blog entry a while ago on how to handle png-images in Internet Explorer 6 (IE6) that are used as a background in a 'div' or a 'td' or something so that they can become transparent. This solution works but is not the best. Instead I use the IE PNG Fix by TwinHelix.

All you have to do is to copy the iepngfix.htc and blank.gif to some place on your server. See the instructions. Then use the following css which will handle the tags which use the png for transpacency.

<style type="text/css"> img, div { behavior: url(css/resources/iepngfix.htc) } </style>

You could add ''a or 'td' if those tags are used instead, like this:

<style type="text/css"> img, div, a, td { behavior: url(css/resources/ iepngfix.htc) } </style>

So this is basically everything you need to do, very easy and handy.

Now, I have bumped into a problem in the case when I have more html in a 'div' or a 'td' on which I have used this.
Say it looks like this:

<style type="text/css"> td.transparency { background: url(images/anImage.png) left top no-repeat; width:238px; height:572px; margin: 0; padding: 0px 0px 10px 3px; } </style> <style type="text/css"> td { behavior: url(css/resources/ iepngfix.htc) } </style> <table><tr><td class="transparency"> <div><a href="http://www.twitter.com">Twitter</a></div> <table></tr></td>

Now the link will probably not work (I haven't tested this specific case actually). Other functionality might disfunction as well. So what you have to do in order to fix this is to work with the postitions of the different elements. This page describes the problem and solution and is recommended by TwinHelix.

What I did to solve the problem was only to add a small style attribute to the inner element holding the links, like this:

<table><tr><td class="transparency"> <div style="position:relative"><a href="http://www.twitter.com">Twitter</a></div> <table></tr></td>

And it works!

As a web designer you might get into situations where you need to make elemens transparent so that they can be seen through each other. An example is a vertical menu that roll down over the rest of the page. It looks really nice if it is transparent so that you can still see the background for instance. A way to do this is simply to set a color for that element (div) and make it transperent to some degree.

Here is an example on how to put several layers on an image with different colors on top of each other where each layer is transperent to different degrees.


Use css-classes that looks something like this. The first one contains the background color and is on the back. The other are nested inside it.

.divImage { background: url(images/someImage.jpg) no-repeat; height:300px; width:300px; } .div1 { background: #FF0000; height:200px; width:200px; -moz-opacity:0.4; opacity: 0.4; filter:alpha(opacity=40); } .div2 { background: #00FF00; height:100px; width:100px; -moz-opacity:0.6; opacity: 0.6; filter:alpha(opacity=60); } .div3 { background: #0000FF; height:50px; width:50px; -moz-opacity:0.6; opacity: 0.6; filter:alpha(opacity=60); }

So the HTML-code would simply look something like this to get a similar behaviour as in the example above:

<div class="divImage"> <div class="div1"> <div class="div2"> <div class="div3"></div> </div> </div> </div>

Using png-files is common when you want transparent images on a webpage. The only problem is that the png-images are not transparent in IE6 (Internet explorer 6). Instead you will find that the background is white (at least for me).

There is a solution to this involving some css-coding that a colleague of mine found on the Internet. What you do is that you add two css-classes to your stylesheet style.css.

.image_area { background-repeat:no-repeat; color:#FFFFFF; float:left; text-align:left; width:300px; height:200px; padding:0; margin:0; background-color:transparent; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='images/anImage.png'); } .image_area[class] { background-image:url(images/anImage.png); }

Width and height above are the same as the width and height of the image. And the name of the image is 'anImage.png' in the directory 'images'.

Then use the css-classes in a html-file like below and you have got a non-transparent png-image in IE6 and of course in all the other browsers as well. The div will have a background image that is transparent. This means that you can add another image in the div, set a background color for the div or for the body as you like.

<html> <head> <link rel='stylesheet' type='text/css' href='style.css' /> </head> <body> <div class="image_area"></div> </body> </html>

Here is a tip on how to use css on web pages.
As you develop your website you define your css-file and often uses its classes explicitly on the web page. Sometimes there is a need to use behaviour from different classes and you end up with creating a new redundant one for a particular situation.

Here is how you can do to use existing classes by cascading them for extended behaviour for an element on a web page when explicitly declaring them .

The css-structure looks like this:

.ce1 { color:#FF0000; font-size: 16px } .ce2 { color:#0000FF; }

The common way to explicitly use a css-class in an element is like this, i.e. refer to one css-class element:

<div class="ce1">Some text</div>

To use more than one classes do it like this:

<div class="ce1 ce2">Some text</div>

and it will render this way:

It doesn't matter which order the css-elements has in the div class argument - i.e. class="c1 c2" is the same as class="c2 c1".
This way you get the properties of both classes. If the same properties are specified in both classes , the precedence lies in which order the css-classes are declared in the css-structure. Should be the opposite in my opinion.

So if you declare the css-structure like this:

.ce4 { color:#0000FF; } .ce3 { color:#FF0000; font-size: 16px }

the same code :

<div class="ce3 ce4">Some text</div>

will render this way: