PNG buttons do not alight correctly

Question

Hi,

I have 6 png images that I am trying to align as buttons in one line. All the buttons tend to align correctly expect for the last one. I have margin-left:0px, so all the buttons stick together looking like a long tag.

During load time, if the page takes longer the last button loads fastest so loads and just goes all over the place.

How can I fix this problem?

Thank you.

Answer 1

1. 99% of the time, for menus you should be using text links with an image replacement method. Just as tables should only be used for tabular data, images should only be used for semantically visual data.
2. Do the <img> tags have an explicit height and width? i.e. <img src="#" height="100" width="60"/>? If not, try giving them one. If this is not defined, the browser does not know the height and width of the image until it's loaded.

Answer 2

Try floating them left or right (depending on your layout) and or making them blocks:

.myimg { float:left; display:block; }