extra stuff within <a> <img> tags in opera

[jeremy]

I have a nav div as follows
#nav {
position: relative;
border: 1px solid #800000;
margin-left: 10px;
height: 25px;
}
.imgLeft {float:left; margin:2px 2px 2px 0;}
.imgRight {float:right; margin:2px 0 2px 5px;}
#nav a img { margin: 4px 5px; }
#nav a:hover, #nav a:hover img {background:#6FFFCC;}

and code as follows
<div id="nav">
<a href=""><img src="..." class="imgRight" alt="" />
</a>
<a href=""><img class="imgLeft" src=".." alt="" />
</a>
<a href=""><img class="imgLeft" src=".." alt="" />
</a>
<a href=""><img class="imgLeft" src=".." alt="" />
</a>
</div>

This gives me an outline with a few images as menu items. The trouble is that in Opera, just after the imgleft images finish, there are 4 small 1px dots that can be hovered over by the mouse and when this happens it highlights the appropriate image menu item. They appear to be duplicates of the menu items.
I get the impression it is something to do with the fact that the <a> tags only contain images and no text, and Opera is trying to substitute something.
If I do not float the images, then the background hover is much larger than the image size.

Any ideas before I waste any more time here.

Neither problems occur in IE. In Mozilla I get the background problem but not the dots.

[grahamstewart]

When you write code like this..

<a href=""><img class="imgLeft" src=".." alt="" /> 
</a> 

It is interpreted (correctly IMHO) as a link around a image followed by a space.

Instead try..

<a href=""><img class="imgLeft" src=".." alt="" /></a> 

and see if that helps.

[jeremy]

Thanks Graham, Looking at your post it was hard to determine exactly what you meant, I guess you put an extra space after the / and before the close >.
I tried that and it made no difference. Thanks anyway.

[grahamstewart]

No, I meant </a> tag has to appear immediately after the <img> tag. If you put it on a new line then the browser will interpret this as a space.

[jeremy]

Thanks Graham, that worked just fine.

This raises another question, if you dont't mind. Do any other tags have interpretations like this that I should know about. This sort of stuff can waste a lot of time for a newcomer like me. I do not like to reinvent the wheel, I prefer to study it and learn from it.

[grahamstewart]

Yup - the same thing goes for pretty much any tag. Whitespace is not ignored in HTML, instead it is treated as a single space character (depending on the browser).

So for example..

<img src="pic1.gif">
<img src="pic2.gif2>

Will cause a space between the images, to get rid of it they must be on the same line, right after each other.

[jeremy]

Thanks again, the trees are starting to become visible in the forest. I will pay more attention to how I format things in future. I generally try to keep it neat and tidy and do not like to scroll l&r so I guess I will have to learn.

[grahamstewart]

Yeah nicely laid out HTML is definitely a good thing. :)

But it also needs to reflect what you actually mean, so if you want two images right after each other, then thats what you have to have in your code.