Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
Browser Specific Problems: IE6 list items, floats, background images, oh my
Bottom of Page1 to 4 of 4
-
For IE6, does anyone know how to get a background image of a list-item to go around a floated div? Here's a sample code of my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE6 list items, floats, background images, oh my</title>
<style type="text/css" media="screen">
div#float {
float: left;
background: none;
border: 1px solid #000;
width: 200px;
padding: 10px;
margin-right: 3px;
}
ul { list-style: none; margin: 0; padding: 0; }
li {
background: url(http://www.tlu-students.com/images/ico_article2.gif) 0px 2px no-repeat;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="float">
<p>Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. </p>
</div>
<ul>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
</body>
</html> -
- CommentAuthoraxe_sosharp
- CommentTimeJun 18th 2007
Apply left margin to the list eg:
ul { list-style: none; margin: 0; padding: 0;margin-left:230px; } -
Thanks axe, but If I apply a left margin to the list, then the list will always have that margin throughout. I just want the image to wrap around the floating element.
-
- CommentAuthoraxe_sosharp
- CommentTimeJun 20th 2007
Sorry misunderstood what you were looking for. I think this is what you are after, instead of using as a background try using list-style-image eg:
<!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>IE6 list items, floats, background images, oh my</title>
<style type="text/css" media="screen">
div#float {
float: left;
background: none;
border: 1px solid #000;
width: 200px;
padding: 10px;
margin-right: 3px;
}
ul { list-style: none; margin: 0; padding: 0;}
li {
list-style-image: url(http://www.tlu-students.com/images/ico_article2.gif);
list-style-position:outside;
text-indent:10px;
margin-left:20px;}
</style>
</head>
<body>
<div id="float">
<p>Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. Some content that will go here. </p>
</div>
<ul>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
</body>
</html>
1 to 4 of 4