List-Style-Position: Inside

Forum Moderators: not2easy

Message Too Old, No Replies

List-Style-Position: Inside

Mozilla ¦ Netscape Problem

madcat

3:09 pm on Sep 20, 2003 (gmt 0)

I have an <ul> that serves as my main menu. I simply want to use a bullet or image in front of each <li>.

I have it set-up so that each <li> has its own box within the menu. So, I had to use list-sytle-position: inside so that the bullet would be within the walls of each <li> box.

IE and Opera do exactly what I ask. Mozilla and Netscape seem to put a <br /> or something after the bullet - so that a line divides the bullet and the link text.

Does anyone know why?

Thanks for any help!

Ryan8720

7:53 pm on Sep 20, 2003 (gmt 0)

Post the code.

D_Blackwell

7:53 pm on Sep 20, 2003 (gmt 0)

I think that I followed the criteria and it works fine in Navigator and Opera. I didn't see the problem. What I have I not put in the pot?

<html>
<head>
<style>
body {
margin: 0; padding: 0;
}
.menu {
width: 15%;
}
ul {
margin: 0; padding: 0;
}
li {
border: .3em solid #000; padding: .3em; list-style-position: inside;
background-color: #faebd7; margin-bottom: 1em;
text-align: center;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
xxxxxxxxxx
</li>
<li>
xxxxxxxx
</li>
<li>
xxxxxxxx
</li>
</ul>
</div>
</body>
</html>

D_Blackwell

8:20 pm on Sep 20, 2003 (gmt 0)

Oops. Left out the <a>s, but it doesn't seem to matter.

ne00_99

5:33 am on Sep 21, 2003 (gmt 0)

Try this.

li {
border: .3em solid #000;
padding-left: 10px;
list-style-position: inside;
background-color: #faebd7;
margin-bottom: 1em;
}

Seems to improve it a bit on my end, not sure if this fixes your problem.

madcat

1:29 pm on Sep 21, 2003 (gmt 0)

Kind of interesting...

I had set the anchor styles to display block so that when using the hover effect the entire background would be selected rather than just the text.

So because I had my <ul> like this:

...in Mozilla and Netscape, <li> was block as well as <a>- creating a line break. IE and Opera didn't create the break. My guess is that the latter two are incorrect. Logical enough, just didn't see it at first.

- Thanks for your help...