Weird list problem

HTML & CSS
1

I have a list in a site i’m working:


#middle ul {
	margin-left:60px;
	list-style-image: url(../images/tick.gif);
	list-style-position:outside;
}

#middle ul li {
	float: left;
	line-height: normal;
	margin-bottom: 10px;
}

In on of the lis I have the following word between brackets: (Singular). Because of the ul in the word a list-style-image is place there as well. I have tried every escape


#middle ul ul {
    list-style-image: none;
    list-style: none;	
}

#middle ul li ul {
     list-style-image: none;
     list-style: none;	
}

But not seems to help

2

You need to use HTML entities instead of real brackets so the browser doesn’t recognize it as a tag anymore: <Singular>

3

Thank you for that ScallioXTX. I have another question about the same list (I’m not a real list man I guess) This list is really behaving very weird, or it’s me not knowing how to handle this. When I set list-style-position to outside. The first list item shows the image not in front but after the text. When I set list-style-position to inside and a text is quite long the second and every line after are not aligning with the first line.

4

Could you also post the HTML of the list please, or provide an URL to a live example?

5

Hi,

When you set list-style: outside (the default) the list marker is placed outside the principal box and the text will align with itself and not under the bullet.

When you set list-style-inside the bullet is placed inside the principal box and behaves like an inline element and will take its normal place as if it were just another piece of content. that is to say that when text wraps it will line under the bullet as though it were just more text.

That’s just the way it works :slight_smile:

If you want the bullet inside a box then move the whole ul inside and leave the bullet as outside.

e.g.


<!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>
.outer {
    width:300px
}
.box {
    background:red;
    margin:20px 0 20px 100px;
    border:1px solid red;
}
ul.test1 {
    list-style:outside;
    margin:0;
    padding:0;
}
ul.test2 {
    list-style:inside;
    margin:0;
    padding:0
}
ul.test3 {
    list-style:outside;
    margin:0 0 0 20px;
    padding:0
}
</style>
</head>
<body>
<div class="outer">
    <div class="box">
        <ul class="test1">
            <li>This is some text that will wrap around when it gets to the end of the line</li>
        </ul>
    </div>
    <div class="box">
        <ul class="test2">
            <li>This is some text that will wrap around when it gets to the end of the line</li>
        </ul>
    </div>
    <div class="box">
        <ul class="test3">
            <li>This is some text that will wrap around when it gets to the end of the line</li>
        </ul>
    </div>
</div>
</body>
</html>
6

Hi ScallioXTX, and Paul O’B. Thank you both for the response. I don’t know what happened. But suddenly everything was okay. I followed Paul’s advise to step back to position outside and gave the ul some extra margin-left and everything is okay now.