css lists

Square bullets show in Firefox but not in IE

[pebrot]

Can anyone help please. Be very grateful!

html code:
<ul>
<li> <a href="Matravers-ventas.htm#avashog">Hogares y peque&ntilde;as
oficinas </a></li>

<li> <a href="Matravers-ventas.htm#avaspyme">Peque&ntilde;as y medianas empresas</a></li>

<li> <a href="Matravers-ventas.htm#avascorp">Corporaciones</a></li>
</ul>

css code:
ul {
margin-left:0px;
margin-right:0px;
list-style:square;
}

li{
font-size: 11px;
margin: 0px;
list-style-type: square;
bulletp ;
}

[swa66]

"bulletp;" is a syntax error.

[jigsaw.w3.org...]

What effect are you actually looking for and what's it that doesn't work as you intended?

[Ingolemo]

Also, you don't need a list-style on the ul, just the li.

[Setek]

What effect are you actually looking for and what's it that doesn't work as you intended?

As pebrot stated, the bullets show up in firefox, but not in IE.

Also, you don't need a list-style on the ul, just the li.

Or, you can also just have a

list-style

on the

ul

, and not the

li

:)

It inherits :)

Can anyone help please.

So, the reason why your bullets are showing in one browser but not the other...

By default, standards-compliant browsers vs. Internet Explorer have rendered things... differently.

For example, take lists. In both ordered and unordered lists, the two "groups" of browsers have interpreted how to "push" the text "away" from the bullets/numbers in different ways.

To illustrate we use your problem. Why? Because Firefox/Safari/Opera/pick-another-standards-compliant-browser-or-close-enough-to-it will push out the

ul

or

ol

with

padding

.

Internet Explorer "pushes" the text with

margin

.

Since you've removed

margin

from your

ul

, this means standards-compliant browsers are fine as they are using

padding

, but in Internet Explorer, the bullets will be showing 40px to the left of the viewport. So, it's still showing, just not in a place you can see it :)

How to fix this? You can avoid differing rendering issues by forcing all browsers to render the same way:

* { margin: 0px;
padding: 0px; }

And then set them again, yourself:

p { margin: 10px 0px; }
ul, ol { margin: 10px 0px 10px 40px; }
h1, h2, h3, h4, h5, h6 { margin: 15px 0px; }

Etcetera :)

[edited by: Setek at 2:08 am (utc) on Sep. 19, 2006]