Kor
05-20-2009, 05:19 AM
I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. :confused: What the hack?:mad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must:
- wrap around a floated element
- have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements)
I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must:
- wrap around a floated element
- have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements)
I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas?