Problems with bullets inside a div

Injen

02-07-2012, 11:00 PM

Cant solve this one by my own.
It looks like it shuld with IE 8/9, but with 6/7 the bullets are way of to the left. See picture

http://img708.imageshack.us/img708/9060/29813105.jpg

I know, it aint many that run IE 6/7 anymore, but there's still some :rolleyes:

Code from site.css
div.info ul li {
list-style-type: none;
background-image: url('/images/bullet.jpg');
background-repeat: no-repeat;
background-position: 0px 15%;
height: 30px;
line-height: 1em;
padding-left: 8px;
padding-right: 20px;
}

div.info {
width: 350px;
height: 115px;
margin-left: 70px;
}

Code from php

<p>
<strong>President:</strong> <a href="mailto:xxx">John doe</a>
<br>
<img src="/images/pic.jpg" width="100" height="100" align="left" /><div class="info"><ul><li><strong>City:</strong></li><li><strong>Age:</strong></li><li><strong>Group:</strong></li></ul></div>
<p>

Any suggestion what to do?

Sammy12

02-07-2012, 11:07 PM

did you reset your default margins and paddings?

* {
margin: 0;
padding: 0;
}

after that, put the image within the .info as shown below, you may also want to take out margin-left: ; from .info.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-147.png

Injen

02-08-2012, 07:42 PM

Thanks for reply.
If i put the image within the .info as you said the bullets ends up insude the image. That why i placed the image before.
I've tried everything to make some distance between the image and bullets, but they are stuck where they are now :)

Excavator

02-08-2012, 08:25 PM

Hello Injen,
Look what happens if you float your image and margin your ul over - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 760px;
margin: 30px auto;
padding: 20px 20px 300px;
background: #999;
overflow: auto;
}
.info {
width: 350px;
overflow: auto;
background: #ccc;
}
.info img {
float: left;
display: block;
background: #f00;
}
.info ul {
margin: 0 0 0 100px;
padding: 0 0 0 20px;
}
.info ul li {
height: 30px;
line-height: 1em;

}
</style>
</head>
<body>
<div id="container">
<p> <strong>President:</strong> <a href="mailto:xxx">John doe</a> </p>
<div class="info">
<img src="/images/pic.jpg" width="100" height="100" alt="description" />
<ul>
<li><strong>City:</strong></li>
<li><strong>Age:</strong></li>
<li><strong>Group:</strong></li>
</ul>
</div>
</div>
</body>
</html>