<ul> not showing in Internet Explorer but is in Firefox!

[Joker7]

The little circle is showing up in Firefox but not
Internet Explorer,there me working away to get all
to work with Firefox now it Internet Explorer
giving me a problem.

Any ideas or pointers.

Thanks
Chris

html//
<ul class=nav>
<li><a href="http://test.php"
target="_self">Test</a></li>
<li><a href="http://test.php"
target="_self">Test</a></li>
</ul>

css//
ul.nav{
color: #fd9;
float: left; clear: left;
margin: 0em 1em 0em 0em;
padding: 0;
line-height: 1em;
font-size:12px;
list-style-type:circle;}

a:link{
color: #fd9;
text-decoration: none;}

a:visited{
color: #fd9;
text-decoration: none;}

a:hover{
color: #fec;
text-decoration: underline;}

 

[Steve Pugh]

The little circle is showing up in Firefox but not
Internet Explorer,there me working away to get all
to work with Firefox now it Internet Explorer
giving me a problem.

css//
ul.nav{
color: #fd9;
float: left; clear: left;
margin: 0em 1em 0em 0em;
padding: 0;
line-height: 1em;
font-size:12px;
list-style-type:circle;}

Have a look at http://steve.pugh.net/test/test37.html

IE places the bullet outside the <ul>. Firefox places the bullet
inside the <ul> but outside the <li>.

By setting the left margin of the <ul> to zero you puish the bullet
either further to the left in IE but not in FF.

For cross browser compataibility of list bullets you need to think
about margin-left and padding-left of <ul> and margin-left of <li>.

Steve

 

[Blinky the Shark]

Have a look at http://steve.pugh.net/test/test37.html

IE places the bullet outside the <ul>. Firefox places the bullet
inside the <ul> but outside the <li>.

How'd I luck out? IE and FF render this page (and my other relevant
ones) the same, here, with respect to bullet placement, without any
conscious manipulation via margins on my part.

http://blinkynet.net/stuff/comp/bullets.gif

http://blinkynet.net/humor/index.html

 

[Steve Pugh]

How'd I luck out? IE and FF render this page (and my other relevant
ones) the same, here, with respect to bullet placement, without any
conscious manipulation via margins on my part.

http://blinkynet.net/humor/index.html

You haven't set any styles at all for your lists. So the browsers use
their default styles, which happen to look very much the same even
though they're achieved very differently.

Imagine two browsers, one of which has
P {margin-left: 20px;}
as default, and the other has
P {padding-left: 20px;}

On most pages you wouldn't see any difference between the two. But
then look at a page where the author has set a border round
paragraphs...

Steve

 

[Blinky the Shark]

You haven't set any styles at all for your lists. So the browsers use
their default styles, which happen to look very much the same even
though they're achieved very differently.

Imagine two browsers, one of which has
P {margin-left: 20px;}
as default, and the other has
P {padding-left: 20px;}

Gotcha.

 

[Toby Inkster]

ul.nav{
margin: 0em 1em 0em 0em;
padding: 0;
}

Bit of advice. Whenever you tinker with margins or padding on OL, UL or LI
elements, explicitly set *all* the padding and margins for OL, UL and LI
elements.

Different browsers have wildly different CSS defaults for lists.

 

[Joker7]

::
: Have a look at
http://steve.pugh.net/test/test37.html
:
: IE places the bullet outside the <ul>. Firefox
places the bullet
: inside the <ul> but outside the <li>.
:
: By setting the left margin of the <ul> to zero
you puish the bullet
: either further to the left in IE but not in FF.
:
: For cross browser compataibility of list bullets
you need to think
: about margin-left and padding-left of <ul> and
margin-left of <li>.
:
: Steve
:
: --
: "My theories appal you, my heresies outrage you,
: I never answer letters and you don't like my
tie." - The Doctor
:
: Steve Pugh <[email protected]>
<http://steve.pugh.net/>

Thanks Steve,