Wrapping an unordered list around a left floating image
I am unable to get an unordered list to wrap properly around a left floating image. Here is an example of a page I am working on: http://wildadirondacks.org/adirondack-plants.html
Here is the relevant css:
Code:
.figureLeft {
float: left;
width: 40%;
height: auto;
margin-left: 0px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
}
.sectionRight ul .rightSectionLeftImageList {
position: relative;
left: 1em;
padding-bottom: 0.75em;
padding-right: 1em;
}
Here is the relevant HTML code:
Code:
<div class="figureLeft"><img src="images/Trees-of-the-Adirondacks-Tamarack-22-September-2012-85.jpg" alt="Trees of the Adirondack Mountains: Tamarack at the Paul Smiths VIC (22 September 2012) " title="Trees of the Adirondack Mountains: Tamarack at the Paul Smiths VIC (22 September 2012)" class="imageLeft">
<div class="figcaptionleft">
<strong><a href="adirondack-trees.html">Trees of the Adirondacks</a></strong>: Tamaracks, also known as American Larch, are an exception to the usual pattern for conifers. The Tamarack is a conifer which, in contrast to most needle-leaved trees, sheds its needles in the fall and grows new needles in the spring. <a href="trees-of-the-adirondacks-tamarack-larix-laricina.html">Tamarack</a> at the Paul Smiths VIC (22 September 2012). </div>
</div>
<p>About <a href="adirondack-tree-list.html">100 native species of trees</a> are present in the Adirondack Mountains. Many of these are found only on the lower elevations of the Adirondack Park. Only about thirty species can be found in the Adirondacks high peaks region. </p>
<ul>
<li class="rightSectionLeftImageList">The tree species present in the region's forest communities vary, depending on regional climate, topography, drainage, and soils. </li>
<li class="rightSectionLeftImageList">Adirondack forest communities also reflect the impact of human activities over the past two centuries. Over 80% of the forestland in the Adirondack Park has been disturbed by human activity, mainly logging. As a result, many of our forest communities are in various stages of succession.
</li>
<li class="rightSectionLeftImageList">Our forest communities are also dynamic; the trees present in a particular location respond in different ways as the forest matures and is affected by other factors, such as climate change, fire, and ongoing logging operations.</li>
</ul>
This works sort of OK with Google Chrome, Firefox, and Safari, in the sense that the list floats like it is supposed to do. The problem here is that I have been unable to get the links in the figure caption to work.
The situation is much uglier with Internet Explorer and Opera. In both cases, the text of each list item wraps around the image, but the disks appear superimposed on the image.
Please help! I need to fix the ugly positioning of the disks in Internet Explorer and Opera. I also fix the problem of the links not working in the figure caption in Chrome, Firefox, and Safari.
Many thanks, ellen
