[WEB4LIB] Re: HTML question - lists

[Keith Higgs]

While there is still some tweaking to do, I saved a local copy of the
original page and implemented the following:

For each image/list pair use this pattern

<div style="float: left; width: 240px; clear: left;">
	<a href=...><img src=...></a>
</div>
<div>
	<ul> ... UL content ... </ul>
</div>

Setting the width property in the DIV style tells the browser how much
room to leave before rendering the UL content.

This should also eliminate the need for the extra <br clear="all" /><br>
because you have then coded the DIV containing the image to clear=left.

There is still some tweaking to be done to get the nested ULs to indent
properly but, it does make the bullets visible.

Keith
D. Keith Higgs <mailto:dkh2 at po.cwru.edu>
 Case Western Reserve University, Webmaster - University Library
 Additional Information at http://www.cwru.edu/UL/
"Follow the white rabbit."


> -----Original Message-----
> From: web4lib at webjunction.org 
> [mailto:web4lib at webjunction.org] On Behalf Of Thomas Dowling
> Sent: Thursday, September 26, 2002 03:23 PM
> To: Multiple recipients of list
> Subject: [WEB4LIB] Re: HTML question - lists
> 
> 
> At 01:05 PM 9/26/2002, Diane Madrigal wrote:
> >I'm working on a Web page that combines images and bulleted 
> lists.  If I 
> >put the images on the right side, the list items appear 
> correctly (see 
> ><http://www.nysl.nysed.gov/mssc/almanac/vvisalm9test.htm>).  
> However, if I 
> >move the images to the left-hand side of the page, using <img .... 
> >align="left">, the bullets on the list items disappear (see 
> ><http://www.nysl.nysed.gov/mssc/almanac/vvisalm9.htm>).
> 
> 
> I believe you're desciribing a long-standing IE bug.
> 
> 
> 
> >Any suggestions as to why this happens, and how to prevent it?
> 
> Use Mozilla or Opera?
> 
> You can come close with:
> 
> <div class="wrapper">
> <div class="cover-image">[image]</div>
> <div class="lists">[text]</div>
> </div>
> 
> Where the div.cover-image style has "float: left; width: [something 
> specific]" and the div.lists style has "padding.  But IE 
> doesn't display 
> the nested ULs with correct margins in my test.
> 
> 
> >(I know using a table would solve the problem, but I was 
> trying to avoid 
> >using tables for layout purposes.)
> 
> 
> I think you can make a case that this is tabular data.
> 
> 
> 
> Thomas Dowling
> OhioLINK - Ohio Library and Information Network
> tdowling at ohiolink.edu
> 
> 
>