homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

 10:08 am on May 10, 2003 (gmt 0)

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 href=""><img class="imgLeft" src=".." alt="" />
<a href=""><img class="imgLeft" src=".." alt="" />
<a href=""><img class="imgLeft" src=".." alt="" />

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.



 10:23 am on May 10, 2003 (gmt 0)

When you write code like this..

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

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.


 10:37 am on May 10, 2003 (gmt 0)

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.


 10:43 am on May 10, 2003 (gmt 0)

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.


 10:51 am on May 10, 2003 (gmt 0)

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.


 11:02 am on May 10, 2003 (gmt 0)

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.


 11:22 am on May 10, 2003 (gmt 0)

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.


 11:33 am on May 10, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved