<img> within <span> fails with IE but works well in chrome & mozilla

I开发者_如何学编程 have follow following code in my JSF application

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="simple" first="0" rows="10" dir="LTR">
<img src="demo/4.jpg" alt="picture" />
</t:dataList>

which generates following code on execution:

<span id="slider-one" style="display:inline">
<img src="demo/4.jpg" alt="picture" />                                            
<img src="demo/4.jpg" alt="picture" />
</span>

I am using JQuery to slide these images which works well in Chrome & Mozilla but fails in IE. Does anyone have any suggestion for this?

When you use <t:dataList layout="simple"> with any attribute which needs to be emitted into the HTML, like id="slider-one", then it will render a containing <span> element with that attribute.

As answered by RobB, you rather want to use a containing block element instead like <ul> with each image inside a <li>. To achieve that with Tomahawk's <t:dataList>, you need to set the layout attribute to unorderedList like so:

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="unorderedList" first="0" rows="10" dir="LTR">
    <h:graphicImage value="#{ofr}" alt="picture" />
</t:dataList>

(note, it was beyond me why you used <img> with a fixed src, it would only show all the same images, shouldn't you be using a <h:graphicImage> referring the #{ofr} which I assume represents the image's URL?)

This will generate HTML like follows:

<ul id="slider-one">
    <li><img src="demo/1.jpg" alt="picture" /></li>
    <li><img src="demo/2.jpg" alt="picture" /></li>
    <li><img src="demo/3.jpg" alt="picture" /></li>
    ...
</ul>

Most if not all of those jQuery slider plugins/examples are also based on a list of images which is marked up by an <ul><li>.

Assuming I understand your issue correctly, you are trying to create some form of an image slider. In this case, you should use an ul and list each individual image as an li element, as a span should not really be used to house multiple elements as you are trying to do. Then wrap a div around the ul that has overflow: hidden; with a specific width set to only expose one of your images at a time. The div will act as a window to view the images within. You will then slide the ul within the div to the left or right, according to your desired direction.

If I misunderstood your issue, then my apologies.