PDA

View Full Version : position a List next to table, cross-browser



Thatsid
Jan 19th, 2007, 04:59 PM
I'm having trouble in creating a list that positions next to- and possibly wraps around a table, div or image and behaves well on all occasions.
This construction has the following conditions:


The document has to be XHTML 1.0 transitional
The bullets have to align properly next to the table in IE6, IE7 and Firefox 1.5.0.8 (most commonly used FF-version)
The content has to wrap around the element. That's why a 2-cell table, with the image placed in the left cell and the text and list in the right cell, is no option.
This content is to be maintained in a Content Management System, so it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior. All styles have to be placed in the standard classes for the <ul> and <li>, as you can see in the stylesheet in the header. The same basic code has to be working also without standing next to the table element.

Find the used styles in the header-tag. In the comments in the classes you can see some things we tested, but not succeded in.

Download the sourcecode (http://www.thats-id.nl/test_list_wrapping/test_list_wrapping.zip)
See the testpage (http://www.thats-id.nl/test_list_wrapping/)

Code of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test bullets next to image</title>

<style type="text/css">
<!--
p, a, li {font-family:arial;font-size:11px;}

ul {
list-style:none;
margin: 0; /* UL ALIGNS TO LEFT OF DOCUMENT */
/*NOT WORKING > position: relative; ALIGN LI's RELATIVE TO PREVIOUS ELEMENTS *
/*NOT WORKING > left: 20px; SPACE BETWEEN PREVIOUS ELEMENT AND LI */
padding: 0px 0px;
border: 0px none;
/*NOT WORKING > overflow:hidden; UL STARTS AT RELATIVE POSITION */
}
ul li {
margin:0;
padding:0;
padding-left:15px;
background-image:url(list_item_bullet.gif);
background-repeat:no-repeat;
background-position:0px 8px;
border:1px solid red;
/*NOT WORKING > position: relative; GIVING LI A RELATIVE POS. MAKES IT ALIGN TO UL */
width:100%; /* makes the bullets align next to the table. */
}
-->
</style>
</head>


<body style="margin:10px; padding:0;">
<!-- Start: container for content -->
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="border:2px solid green;">
<h2>list in text wrapping around table</h2>

<!-- Start: table with media element, like visual and subscript -->
<table width="239" height="179" border="0" align="left" cellpadding="0" cellspacing="0" style="margin-right:15px; margin-bottom:10px; border:1px solid blue;">
<tr>
<td>[place for image] </td>
</tr>
<tr>
<td>[place for subscript] </td>
</tr>
</table>
<!-- End: table with media element, like visual and subscript -->
<!-- Start: text and bullets -->
<p>text</p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
<li>bullet item4</li>
<li>bullet item5</li>
<li>bullet item6</li>
<li>bullet item7</li>
<li>bullet item8</li>
</ul>
<p>text</p>
<p>text</p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<p>text</p>

<!-- End: text and bullets -->

</td>
</tr>
</table>
<!-- End: container for content -->

</body>
</html>

butlins
Jan 19th, 2007, 05:25 PM
Not really sure what you're looking for - but I had a go anyway!

I've tidied up the XHTML and CSS, and added some more text so I could see how things break. To target specific bits of CSS, if you really can't set up divs, classes or IDs in the source code, you'll have to rely on the fact that you can set the property values for the 'table' selector separately from the 'table table' selector.

IE6 has troubles in lining up lists against floated elements. The bullets always ignore any margin, as far as I can tell, and I've never had any success persuading them to do otherwise.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test bullets next to image</title>
<style type="text/css">
<!--
body{
margin:10px;
padding:0;
font-family:arial;font-size:11px;}

p, a, li {}

ul {
margin: 0;
padding: 0;
border: 0;
}

ul li {
margin:0;
padding:0 0 0 12px;
list-style: disc url(list_item_bullet.gif) inside;
text-indent:-12px;
border:1px solid red;
}



table {
width:500px;
border:0;
margin:0;
padding:0;
}

table td {
border:2px solid green;
vertical-align:top
}

table table {
width:239px;
height:179px;
border:0;
margin:0 15px 10px 0;
padding:0;
border:1px solid blue;
float:left;
}

table table td {
border:none;
vertical-align:top
}

-->
</style>

<!--[if lte IE 6]>
<style type="text/css">
<!--
ul li { /* I hate that IE6 lists don't work properly with margins around floated elements, but this kind of works */
margin:0 0 0 15px;
text-indent:0;
padding:0;
list-style: disc url(list_item_bullet.gif) outside;
border:1px solid red;
}
-->
</style>
<![endif]-->

</head>
<body>
<!-- Start: container for content -->
<table>
<tr>
<td><h2>list in text wrapping around table</h2>
<!-- Start: table with media element, like visual and subscript -->
<table>
<tr>
<td>[place for image] </td>
</tr>
<tr>
<td>[place for subscript] </td>
</tr>
</table>
<!-- End: table with media element, like visual and subscript -->
<!-- Start: text and bullets -->
<p>In hac habitasse platea dictumst. Cras porta purus nec nisl. Aenean
vitae massa. In hac habitasse platea dictumst. Suspendisse bibendum fringilla
est. In eget enim quis purus vehicula fermentum. Nulla a lorem vel nulla
vulputate varius. Donec sit amet nisl. Praesent at justo vitae mauris
lacinia venenatis. Nulla facilisi. Aliquam dapibus nulla sed neque. Nulla
facilisi.</p>
<ul>
<li>bullet item1 with extra text to see how it behaves with a longer
line of text and make sure that the bullet lines up each time </li>
<li>bullet item2</li>
<li>bullet item3</li>
<li>bullet item4</li>
<li>bullet item5</li>
<li>bullet item6 with extra text to see how it behaves with a longer
line of text and make sure that the bullet lines up each time </li>
<li>bullet item7</li>
<li>bullet item8</li>
</ul>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas
nunc, vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer
leo. Curabitur ante. Fusce egestas. Suspendisse blandit. Etiam massa.
Sed vehicula, dui vitae pulvinar tincidunt, velit dolor mattis tellus,
iaculis scelerisque erat libero a neque. Pellentesque erat. Nunc et nunc
quis purus malesuada suscipit. Donec scelerisque porta pede. In lorem
odio, fringilla vel, scelerisque hendrerit, tempor non, odio.</p>
<p>Integer vulputate neque quis sapien. Donec ut metus. Nulla metus sem,
auctor quis, aliquam sit amet, lobortis sit amet, eros. Suspendisse potenti.
Integer ac dolor. Nam est augue, sagittis eget, elementum a, mattis tincidunt,
dui. Vestibulum tincidunt lacus id orci tincidunt blandit. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Mauris lacinia est id ante. Nulla feugiat fringilla odio. Nam metus.
In at elit nec nibh viverra scelerisque. Fusce a ligula id ligula posuere
adipiscing. Duis fermentum, nisl sed condimentum posuere, nulla purus
semper elit, eu tristique felis sem porta tellus. Quisque et lorem. Integer
orci orci, interdum in, vehicula sed, suscipit ut, augue. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; </p>
<ul>

<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<p>text</p>
<!-- End: text and bullets -->
</td>
</tr>
</table>
<!-- End: container for content -->
</body>
</html>

Excavator
Jan 19th, 2007, 06:08 PM
Hello Thatsid,
I had a try at it too. No tables, I don't do tables...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
background-color: #666600;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 620px;
margin: 20px auto;
background-color: #CCCCCC;
text-align: left;
}
.image_l {
float: left;
padding: 0 5px 0 0;
}
p {
text-indent: 15px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.jpg" alt="logo" width="422" height="150" class="image_l" />
<p>text</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<p>text</p>
<p>text</p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>

</div>
</body>
</html>

butlins
Jan 19th, 2007, 07:51 PM
Hey, no fair. I don't do tables either :D

If we're doing div based layouts, then here's mine (with the same caveat about IE6 and lists next to floated elements), with a scalable layout using ems rather than pixels.

Of course, if the content_secondary (or the 'table table' selector from the table-based CSS layout earlier) was floated right, you wouldn't have the problem.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test bullets next to image</title>
<style type="text/css">
body {
font-size:0.7em;
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}

p {
margin-bottom:1em;
}

ul {
margin:0;
padding:0;
}


ul li {
border:1px solid red;
margin:0;
padding:0 0 0 12px;
list-style: disc url(list_item_bullet.gif) inside;
text-indent:-12px;
}

#wrapper {
width:39em;
margin:0.8em;
border:2px solid green;
}

#content_secondary {
width:19em;
float: left;
margin:0 1em 0.8em 0;
border:1px solid blue;
}

#content {
}

</style>
<!--[if lte IE 6]>
<style type="text/css">
<!--
ul li { /* I hate that IE6 lists don't work properly with margins around floated elements, but this kind of works */
margin:0 0 0 15px;
text-indent:0;
padding:0;
list-style: disc url(list_item_bullet.gif) outside;
border:1px solid red;
}
-->
</style>
<![endif]-->

</head>
<body>
<!-- Start: container for content -->
<div id="wrapper">
<h2>list in text wrapping around table</h2>
<div id="content_secondary">
<p>[place for image]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas
nunc, vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer
leo. Curabitur ante. </p>
</div>
<div id="content">
<p>In hac habitasse platea dictumst. Cras porta purus nec nisl. Aenean vitae
massa. In hac habitasse platea dictumst. Suspendisse bibendum fringilla est.
In eget enim quis purus vehicula fermentum. Nulla a lorem vel nulla vulputate
varius. Donec sit amet nisl. Praesent at justo vitae mauris lacinia venenatis.
Nulla facilisi. Aliquam dapibus nulla sed neque. Nulla facilisi.</p>
<ul>
<li>bullet item1 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item2</li>
<li>bullet item3</li>
<li>bullet item4</li>
<li>bullet item5</li>
<li>bullet item6 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item7</li>
<li>bullet item8</li>
</ul>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas nunc,
vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer leo.
Curabitur ante. Fusce egestas. Suspendisse blandit. Etiam massa. Sed vehicula,
dui vitae pulvinar tincidunt, velit dolor mattis tellus, iaculis scelerisque
erat libero a neque. Pellentesque erat. Nunc et nunc quis purus malesuada suscipit.
Donec scelerisque porta pede. In lorem odio, fringilla vel, scelerisque hendrerit,
tempor non, odio.</p>
<p>Integer vulputate neque quis sapien. Donec ut metus. Nulla metus sem, auctor
quis, aliquam sit amet, lobortis sit amet, eros. Suspendisse potenti. Integer
ac dolor. Nam est augue, sagittis eget, elementum a, mattis tincidunt, dui.
Vestibulum tincidunt lacus id orci tincidunt blandit. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris lacinia
est id ante. Nulla feugiat fringilla odio. Nam metus. In at elit nec nibh viverra
scelerisque. Fusce a ligula id ligula posuere adipiscing. Duis fermentum, nisl
sed condimentum posuere, nulla purus semper elit, eu tristique felis sem porta
tellus. Quisque et lorem. Integer orci orci, interdum in, vehicula sed, suscipit
ut, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; </p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<p>text</p>
</div>
</div>
<!-- End: container for content -->
</body>
</html>

Thatsid
Jan 22nd, 2007, 02:10 PM
thanks for the replies guys!

I think we are making progress, but we're not there yet!

Both of butlins' solution

Improvement: text doesn't flow over the right side of the container anymore
stil to fix: In IE6 / FF the bullets next to the image have fewer left-margin then the bullets beneath the image. In IE7 they behave again different.


Excavator's solution
Funy thing is that the styling is almost the same as the starting point: a basic list, but it has some desired behavior:

Improvement: text doesn't flow over the right side of the container anymore
Improvement2: In all the desired browsers, the bullets align the same way next to the image as beneath it<br />
stil to fix: Letting the bullets indent so that they align horizontally with the text. Regular styling (like list-style-position / margin etc.) doesn't work in this situation.


Note: I can not imagine that no one encountered this (seemlingly common) problem before while working with content management systems. Strangely I didn't find a single bit of information on this issue... :confused:

Good luck when you're making a second attempt!

Thatsid

Excavator
Jan 22nd, 2007, 06:57 PM
Well, this is a lot tougher than originally anticipated!
Give this a try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
background-color: #666600;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 620px;
margin: 20px auto;
background-color: #CCCCCC;
text-align: left;
}
.image_l {
float: left;
margin: 0 5px 0 0;
}
#wrap ul {
width: 150px;
margin: 0 0 0 25px;
float: left;
position: relative;
}
#wrap ul li{
list-style-type: disc;
}
p {
margin: 0 0 0 5px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="CordovaLogo.jpg" alt="logo" width="422" height="150" class="image_l" />
<p>text</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<p>textlaopnjg aoijsdf oaisj df oaissdj foa sffooi asdfdoia sdfdoias dfoias dfaoisjd foiua sdfoi asodiof aosid foioasj dfo[iojas df[ioj asd[ij asodij [aosiodj f[iasj df[ioajs df[oi asdfo[i oasdfi asdf</p>
<p>text</p>
<p>text</p>
<p>text</p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<br clear="all" />
</div>
</body>
</html>

I gave the ul a width (to keep text off <li></li> line) and floated it left (so margins work next to float). It's starting to work better but IE7 has lost the bullets and I don't know why.


Note: I can not imagine that no one encountered this (seemlingly common) problem before while working with content management systems. Strangely I didn't find a single bit of information on this issue..
I haven't found much either. Every bit of information I find is explaining how to set margin to adjust for the width of the float but nothing about continuing on as we are trying when we wrap the float.

butlins
Jan 23rd, 2007, 11:24 AM
I think it's down to the fact that Firefox and IE use different methods to create lists. If you view this in both:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<ul style="padding:0;">
<li>This list has padding disabled</li>
<li>This list has padding disabled</li>
<li>This list has padding disabled</li>
</ul>
<ul style="margin:0;">
<li>This list has margins disabled</li>
<li>This list has margins disabled </li>
<li>This list has margins disabled</li>
</ul>
</body>
</html>


You'll see that Firefox uses padding and IE uses margins to create the space to the left of a list. I think it's relevant, at least there's something in my bones that tells me that this is relevant, but I haven't worked out how to use this information yet.

Arbitrator
Jan 24th, 2007, 02:01 AM
It's starting to work better but IE7 has lost the bullets and I don't know why.Internet Explorer (version 7, at least) doesnít draw list bullets when they stick outside of the ul element and the (IE) hasLayout property is triggered. Thus you need to either use a left padding to accommodate the bullets, use the list-style-position: inside declaration, or remove references to the properties triggering hasLayout. In this case, both using the width property with a value other than auto and floating the unordered list element triggers hasLayout for that element. I believe this affects version 6 in the same way, but Iím not going to bother testing it. Resource: On Having Layout (http://www.satzansatz.de/cssd/onhavinglayout.html).


You'll see that Firefox uses padding and IE uses margins to create the space to the left of a list. I think it's relevant, at least there's something in my bones that tells me that this is relevant, but I haven't worked out how to use this information yet.Killing the margins and padding from the start to prevent these inconsistencies solves that problem before it even begins. And not on just list elements either. Excavator did that in his code using the below, so itís not significant to this problem.


* { margin: 0; padding: 0; }

Excavator
Jan 24th, 2007, 02:16 AM
Yep!
Thanks to Arbitrator for telling me to use padding instead of margin!
Seems to work now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
background-color: #666600;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 620px;
margin: 20px auto;
background-color: #CCCCCC;
text-align: left;
}
.image_l {
float: left;
margin: 0 5px 0 0;
}
#wrap ul {
width: 150px;
padding: 0 0 0 25px;
float: left;
position: relative;
}
#wrap ul li{
list-style-type: disc;
}
p {
margin: 0 0 0 5px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="CordovaLogo.jpg" alt="logo" width="422" height="150" class="image_l" />
<p>text</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<p>textlaopnjg aoijsdf oaisj df oaissdj foa sffooi asdfdoia sdfdoias dfoias dfaoisjd foiua sdfoi asodiof aosid foioasj dfo[iojas df[ioj asd[ij asodij [aosiodj f[iasj df[ioajs df[oi asdfo[i oasdfi asdf</p>
<p>text</p>
<p>text</p>
<p>text</p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<br clear="all" />
</div>
</body>
</html>

butlins
Jan 24th, 2007, 11:11 AM
Sorry I didn't explain myself fully. The point I was making is that there is a fundamental difference between the way FF and IE render lists, whether or not you initially set padding and margins to 0 (which I do in my solution too). If you look at either of my original two layouts, you can see that the red border surrounding each of the li elements wrap nicely in FF, whereas in IE the left border still extends all the way to the left margin.

That difference pointed to possibly needing entirely separate solutions, as I thought that Thatsid wanted the content to wrap, so that when a line from a list element hit the bottom of the image it then used the whole width of the text area, which is what I was concentrating on achieving.


The content has to wrap around the element. That's why a 2-cell table, with the image placed in the left cell and the text and list in the right cell, is no option.

The problem with limiting the width of the ul elements is that if you have longer text something like this happens:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
background-color: #666600;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 620px;
margin: 20px auto;
background-color: #CCCCCC;
text-align: left;
}
.image_l {
float: left;
margin: 0 5px 0 0;
}
#wrap ul {
width: 150px;
padding: 0 0 0 25px;
float: left;
position: relative;
}
#wrap ul li{
list-style-type: disc;
}
p {
margin: 0 0 0 5px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="CordovaLogo.jpg" alt="logo" width="422" height="150" class="image_l" />
<p>text</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>textlaopnjg aoijsdf oaisj df oaissdj foa sffooi asdfdoia sdfdoias dfoias
dfaoisjd foiua sdfoi asodiof aosid foioasj dfo[iojas df[ioj asd[ij asodij [aosiodj
f[iasj df[ioajs df[oi asdfo[i oasdfi asdf</li>
</ul>
<p>textlaopnjg aoijsdf oaisj df oaissdj foa sffooi asdfdoia sdfdoias dfoias dfaoisjd foiua sdfoi asodiof aosid foioasj dfo[iojas df[ioj asd[ij asodij [aosiodj f[iasj df[ioajs df[oi asdfo[i oasdfi asdf</p>
<p>text</p>
<p>text</p>
<p>text</p>
<ul>
<li>textlaopnjg aoijsdf oaisj df oaissdj foa sffooi asdfdoia sdfdoias dfoias
dfaoisjd foiua sdfoi asodiof aosid foioasj dfo[iojas df[ioj asd[ij asodij [aosiodj
f[iasj df[ioajs df[oi asdfo[i oasdfi asdf</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<br clear="all" />
</div>
</body>
</html>

And part of the original limitation was that no additional classes could be used



This content is to be maintained in a Content Management System, so it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior. All styles have to be placed in the standard classes for the <ul> and <li>, as you can see in the stylesheet in the header. The same basic code has to be working also without standing next to the table element.


So, obviously, if you limit the width of the ul selector, then that applies to all the ul elements on the page.

So here's my (hopefully) final bit of solution. It uses the height:1% in IE to trigger the hasLayout property (thanks Arbitrator for the pointer, and the reference), and as I had no joy with using the list-style, I used Thatsid's original idea of using a background image to create the bullet. The ul li in the conditional comment also works with the version 1 layout adapted from Thatsid's hybrid css/table based layout, just in case that's the format that's generated by the CMS being used.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test bullets next to image</title>
<style type="text/css">
body {
font-size:0.7em;
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}

p {
margin-bottom:1em;
}

ul {
margin:0;
padding:0;
}


ul li {
border:1px solid red;
margin:0;
padding:0 0 0 12px;
list-style: disc url(list_item_bullet.gif) inside;
text-indent:-12px;
}

#wrapper {
width:39em;
margin:0.8em;
border:2px solid green;
}

#content_secondary {
width:19em;
float: left;
margin:0 1em 0.8em 0;
border:1px solid blue;
}

#content {
}
</style>

<!--[if IE]>
<style type="text/css">
<!--
ul li {
margin:0;
text-indent:0;
padding:0 0 0 1em;
list-style: none outside none;
border:1px solid red;
height:1%;
background:url(list_item_bullet.gif) 0.5em left no-repeat;
}
-->
</style>
<![endif]-->

</head>
<body>
<!-- Start: container for content -->
<div id="wrapper">
<h2>list in text wrapping around table</h2>
<div id="content_secondary">
<p>[place for image]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas
nunc, vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer
leo. Curabitur ante. </p>
</div>
<div id="content">
<p>In hac habitasse platea dictumst. Cras porta purus nec nisl. Aenean vitae
massa. In hac habitasse platea dictumst. Suspendisse bibendum fringilla est.
In eget enim quis purus vehicula fermentum. Nulla a lorem vel nulla vulputate
varius. Donec sit amet nisl. Praesent at justo vitae mauris lacinia venenatis.
Nulla facilisi. Aliquam dapibus nulla sed neque. Nulla facilisi.</p>
<ul>
<li>bullet item1 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item2</li>
<li>bullet item3</li>
<li>bullet item4</li>
<li>bullet item5</li>
<li>bullet item6 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item7</li>
<li>bullet item8</li>
</ul>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas nunc,
vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer leo.
Curabitur ante. Fusce egestas. Suspendisse blandit. Etiam massa. Sed vehicula,
dui vitae pulvinar tincidunt, velit dolor mattis tellus, iaculis scelerisque
erat libero a neque. Pellentesque erat. Nunc et nunc quis purus malesuada suscipit.
Donec scelerisque porta pede. In lorem odio, fringilla vel, scelerisque hendrerit,
tempor non, odio.</p>
<p>Integer vulputate neque quis sapien. Donec ut metus. Nulla metus sem, auctor
quis, aliquam sit amet, lobortis sit amet, eros. Suspendisse potenti. Integer
ac dolor. Nam est augue, sagittis eget, elementum a, mattis tincidunt, dui.
Vestibulum tincidunt lacus id orci tincidunt blandit. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris lacinia
est id ante. Nulla feugiat fringilla odio. Nam metus. In at elit nec nibh viverra
scelerisque. Fusce a ligula id ligula posuere adipiscing. Duis fermentum, nisl
sed condimentum posuere, nulla purus semper elit, eu tristique felis sem porta
tellus. Quisque et lorem. Integer orci orci, interdum in, vehicula sed, suscipit
ut, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; </p>
<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<p>text</p>
</div>
</div>
<!-- End: container for content -->
</body>
</html>

This seems to work for IE5.5, 6 and 7 as well as FF. Unfortunately Opera and Safari look like IE without the conditional comments, although rendering of the the hybrid css/table layout wouldn't make me sweat too much. You would have thought it'd be easier... :)

Thatsid
Jan 26th, 2007, 10:20 AM
Hi Guys,

Butlins (and offcourse Arbritrator and Excavator) did a teriffic job! It now works very nicely. And I hope other people will take advantage of this neat solution as well!

We tweaked the margins code a little bit to make it show a little more nicely and make it fit inside an attached stylesheet instead of the header code. In this stage of the project, we can not use div's for the image placement, so I had to return to the previous table lay-out. This is the final html code:



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test bullets next to image</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<!-- Start: container for content -->
<div id="wrapper">
<h2>list in text wrapping around table</h2>
<table width="100" border="0" align="left" cellpadding="0" cellspacing="0" id="content_secondary" valign="top">
<tr>
<td><img src="dummy_visual_portrait.jpg" alt="visual" width="181" height="241" align="left" class="contImg"/></td>
</tr>
<!-- START: ONDERSCHRIFT -->
<tr>
<td class="contImgSubscript">Foto: [txt] </td>
</tr>
<!-- EIND: ONDERSCHRIFT -->
</table>
<p>In hac habitasse platea dictumst. Cras porta purus nec nisl. Aenean vitae
massa. In hac habitasse platea dictumst. Suspendisse bibendum fringilla est.
In eget enim quis purus vehicula fermentum. Nulla a lorem vel nulla vulputate
varius. Donec sit amet nisl. Praesent at justo vitae mauris lacinia venenatis.
Nulla facilisi. Aliquam dapibus nulla sed neque. Nulla facilisi.</p>
<ul>
<li>bullet item1 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item2</li>
<li>bullet item3</li>
<li>bullet item4</li>
<li>bullet item5</li>
<li>bullet item6 with extra text to see how it behaves with a longer line of
text and make sure that the bullet lines up each time </li>
<li>bullet item7</li>
<li>bullet item8</li>
</ul>
<p>Sed placerat. In commodo, velit at viverra faucibus, nisi ipsum egestas nunc,
vel sollicitudin mi libero tempor tortor. Etiam porttitor consectetuer leo.
Curabitur ante. Fusce egestas. Suspendisse blandit. Etiam massa. Sed vehicula,
dui vitae pulvinar tincidunt, velit dolor mattis tellus, iaculis scelerisque
erat libero a neque. Pellentesque erat. Nunc et nunc quis purus malesuada suscipit.
Donec scelerisque porta pede. In lorem odio, fringilla vel, scelerisque hendrerit,
tempor non, odio.</p>

<ul>
<li>bullet item1</li>
<li>bullet item2</li>
<li>bullet item3</li>
</ul>
<p>text</p>
</div>
<!-- End: container for content -->
</body>
</html>


and the stylesheet:



/* The actual code */
ul {
margin:0; /* Hier NIETS aanpassen */
margin-bottom:10px; /* Alleen de marge ONDER de totale list aanpassen */
padding:0; /* Hier NIETS aanpassen */
}


ul li {
/* border-left:0px solid white; Indien gewenst de bullets + tekst laten inspringen */
margin:0; /* Hier NIETS aanpassen */
padding:0; /* Hier NIETS aanpassen */
padding-bottom:5px; /* onderlinge afstand tussen list-items aanpassen */
padding-left:12px; /* afstand tussen bullet en tekst ernaast aanpassen */
list-style: none outside none; /* Hier ALLEEN de bullet visual aanpassen */
list-style: none outside none; /* Hier NIETS aanpassen */
background:url(list_item_bullet.gif) 0px 5px no-repeat; /* Hier nogmaals de bullet visual aanpassen indien dit hierboven ook gebeurd is*/
text-indent:0; /* Hier NIETS aanpassen: IE-fix */
height:1%; /* Hier NIETS aanpassen: IE-fix */
}


/* Just to make the page lay-show nicely */

body {
font-size:0.7em;
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}

p {
margin-bottom:1em;
}


#wrapper {
width:39em;
margin:0.8em;
padding:0.8em;
border:2px solid green;
}

#content_secondary {
width:;
float: left;
margin:0 1em 0.8em 0;
border:1px solid blue;
}



Maybe the next challenge will be creating the ordered list with the above specifications as well ;-)). But for now i'm satisfied.

Thanks again!
Thatsid

Arbitrator
Jan 27th, 2007, 03:30 AM
In this stage of the project, we can not use div's for the image placement, so I had to return to the previous table lay-out. This is the final html code:


<table width="100" border="0" align="left" cellpadding="0" cellspacing="0" id="content_secondary" valign="top">
<tr>
<td><img src="dummy_visual_portrait.jpg" alt="visual" width="181" height="241" align="left" class="contImg"/></td>
</tr>
<!-- START: ONDERSCHRIFT -->
<tr>
<td class="contImgSubscript">Foto: [txt] </td>
</tr>
<!-- EIND: ONDERSCHRIFT -->
</table>


#content_secondary {
width:;
float: left;
margin:0 1em 0.8em 0;
border:1px solid blue;
}So easy with div elements too:

HTML:

<div id="content_secondary">
<img class="contImg" alt="visual" width="181" height="241" src="dummy_visual_portrait.jpg"/>
<div class="contImgSubscript">Foto: [txt]</div>
</div>

CSS:

div#content_secondary {
float: left;
width: 241px;
margin: 0 1em 0.8em 0;
border: 1px solid blue;
}
img.contImg {
display: block;
}