View Full Version : Problems with bullets inside a div

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


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

<strong>President:</strong> <a href="mailto:xxx">John doe</a>
<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>

Any suggestion what to do?

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.


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 :)

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">
<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;

<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" />
<!--end .info--></div>
<!--end container--></div>