Wrapping an unordered list around a left floating image

[ellenjones6]

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:

.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:

      <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

[jscheuer1]

For starters, add:

.figureLeft {
	float: left;
	width: 40%;
	height: auto;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-top: 10px;
	position: relative;
	z-index: 10;
	background-color: #ffffff
}

I used Opera, but current Opera is really like Chrome, do you have an old version of Opera perhaps? I'll check in IE (11 I think is waht I have) and add information if I see anything more that can be done.

Adding bg color (along with the positioning and z-index) seems to fix the bleed through of the discs in IE, but positioning the discs, if possible, might get them where you want them, not sure if there's any way to do that, and if so, without messing up other browsers. You can do:

.sectionRight ul .rightSectionLeftImageList {
	position: relative;
	left: 1em;
	padding-bottom: 0.75em;
	padding-right: 1em;
	list-style-position: inside;
}

But that's not exactly what I think you want, though if you did it for all the lists in the sections having both left and right floated images, it could look OK for the page.

[ellenjones6]

Thank you so much! Fixed most of the problems with a few keystrokes!

The links now work in the captions. The positioning of the list items is correct in Chrome, Firefox, and Safari.

Internet Explorer and Opera still are not working correctly, but at least (1) the discs don't appear on top of the images and (2) the list items are indented, although they lack their little discs. Yes, I have an old version of Opera on my desktop. I tried to update it, but it seems to be resisting my efforts to do so. I have an updated version of Opera Mini on my iPad, and the lists are working quite nicely on that.

I still don't know how to get the discs visible and in the proper places in Internet Explorer. The option of list-style-position: inside occurred to me earlier, and I tried it earlier today, but I really don't like the look, so I went back to the outside position.

So, for now, the only thing that needs fixing is to get the discs to appear properly in Internet Explorer. It's not a really huge issue, but it would be nice if it could be fixed without messing up how the lists appear in other browsers.

Thank you again! I wasted a lot of hours trying to figure this thing out on my own, and you solved it in a few keystrokes!

ellen

[molendijk]

There's another solution: create your own bullets via CSS:

ul {list-style-type: none; margin-top:0; margin-bottom:0}
ul > li:before {content: "."; position: absolute; font-size: 60px; margin-left: -20px; margin-top: -42px}

This will allow you to keep .figureLeft and .sectionRight ul .rightSectionLeftImageList unchanged.

[jscheuer1]

There's another solution: create your own bullets via CSS:

ul {list-style-type: none; margin-top:0; margin-bottom:0}
ul > li:before {content: "."; position: absolute; font-size: 60px; margin-left: -20px; margin-top: -42px}

This will allow you to keep .figureLeft and .sectionRight ul .rightSectionLeftImageList unchanged.

Maybe not, you may still need the positioning and z-index changes for the .figureleft class. But this is a good idea. I didn't want to mess with it because I instinctively thought the positioning of custom discs might not be all that consistent cross browser. And, since there's also a list(s) that's not involved in this on the page, you might want to be more specific about which lists get this treatment. That's assuming it's workable cross browser to begin with.

[molendijk]

I applied this kind of treatment to lists on a number of occasions, and it seems to be cross browser.

[jscheuer1]

I tried this out in Opera (latest version, the one like Chrome) and the discs looked a little funny in the floated areas (oval like, perhaps not an issue, they were positioned well). The list on the left hand part of the page wasn't reacting real well, it's discs were huge (because its font size was already fairly large). But I imagine that could be tweaked easily enough by not including it in these styles (it was fine as it was). I'm wondering what caused the . characters to look oval in the floated sections and if anything could be done about that - perhaps using an image instead? Anyways, I still think it's a good idea.

Also, about updating to the latest Opera, it's not a real picnic. If you still have an old version from before they adopted the browsing engine that's more or less the same as Chrome's, you would need to uninstall Opera, and install the latest version fresh. There are some migratory tools and techniques available. If you're using Opera Mail, you can (or at least could) get a standalone version of that (which I did for awhile, it was fine for a bit), but I'd advise migrating to something more current as Opera Mail's security protocols are old fashioned and therefore won't allow you to utilize some of the newer features now available with email. Using gmail is what I settled on. But I had to change my address. A good thing in the end because I lost a lot of spammers that were following me around, and gmail can be accessed from virtually any browser on any platform, whereas Opera Mail is platform specific and probably will not even run on newer OS's. It's all a learning curve though, and some nice features disappeared from the browser itself. The one I miss most was being able to right click context to force a link to open in the same tab, even if it's target was for a frame or new tab, etc. And I miss the detailed if quirky page analytics/manipulation classic Opera provided (the info feature). But the new version keeps updating and getting better, and has a fairly robust developers' interface to use when desired.

[ellenjones6]

I fiddled around with the create my own bullets approach, but I couldn't get it to work correctly. I may experiment more with it, but -- at the moment -- your initial suggestion fixed the worst of the problem, so I'll stick with that until/if I can get the second solution to work without messing other things up.

I was finally able to get Opera updated. The list (with your suggested fixes to the css) seems to work fine with the updated version.

Thanks again! ellen

[molendijk]

I completely changed the CSS so as to make the lists and their custom bullets appear identical across browsers:

<style>
ul {list-style-type: none!important;  margin:0!important; position: relative!important; margin-top:-5px!important; margin-bottom: 3px!important; }
ul > li:before {content: "."; position: relative!important; font-family: courier!important; font-size: 45px!important; margin-left: -20px!important; margin-right: 5px!important; top: 0px!important; line-height: 17px!important}
</style>

Ellen, the reason why you couldn't get it to work might have to do with conflicting styles, so I added !important everywhere. You may want to try it again.
If the font-size for the page is very small, you may have to adapt line-height and font-size inside ul > li:before.
Note that you can use any symbol you want for the customized lists. For example, you couldt replace content: "." with content: "-". You may have to adapt top and font-size inside ul > li:before in that case.

[ellenjones6]

I will try again, after I have finished with another part of the project. Many thanks! ellen