Thatsid
01-19-2007, 10:23 AM
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>
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>