Menu image positioning

[Srikkanth Mohanasundaram]

Hello all,

I've a menu of items to be displayed , so I'm making use of the UL LI tags to build the list and apply appropriate styling to them. The HTML list i'm using would roughly look like this

 
<ul>
  <li class='parent'> <span><a >Link Text 1 </a> </span>
    <ul>
          <li> <span><a >Child Link Text 4 </a> </span> </li>
     </ul>
 </li>
  <li> <span><a >Link Text 2 </a> </span> </li>
  <li> <span><a >Link Text 3 </a> </span> </li>
</ul>
  

The li item marked with class name parent has CSS definition with a background image (something like the expand image or plus image) . I would want check for the onclick event on this image (I guess it cannot be done,since the image is not a part of the DOM) and call a function which would expand the node. Since i was not able to do it, i tried with something similar to this (changed the HTML on line no. 5 in the previous snippet)

  
<li > <img ><span><a >Link Text 1 </a> </span>
  

But as you would have guessed ,i didn't get the image to position properly . It was like, the image was on one line and the the span gets rendered in the next. I need them to be inline. Can someone let me know on how it should be done?

Thanks,
Srikkanth

[Ankit Garg]

Try to use style="float:left" with your image...

[Srikkanth Mohanasundaram]

Thanks Ankit that helped. I was under the impression that image elements would display inline. Can someone explain?

Thanks,
Srikkanth

[Bear Bibeault]

They will generally display inline, unless something else acts upon them, or the browser decides it needs to wrap for some reason.

[Srikkanth Mohanasundaram]

Thanks Bear. I will check if there is some other conflicting CSS rule.

Thanks,
Srikkanth