Question

I am using jQuery UI to get a nice 3 tab layout using their tabs feature. Everything works great if I have a text within each of the < li> elements that describe the tab text. It turns out it would be super handy to have a little icon on one of the tabs. The icon is made to clarify the tab’s feature, and it would be only one 1 of the 3 tabs.

within the line item I add the image as follows:

<li>
     <a href="#stats"> <img src="Images/image.gif" style="border-style: none" />Tab Title</a>
</li>

It is a small 16px tall image. The image renders just fine, but it looses the separation between the bottom of the tab and then the top of the content. Without the picture, there is a small separation that is gone as soon as I add the image.

Is there any way to get jQuery to know the size of the largest tab height so that everything matches and I can get that visual separation between all the tabs?

Thanks everyone for the help!

Answer 1

Make the image float: left, or position: absolute so it does not affect the layout.