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

J

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;}
 
S

Steve Pugh

Joker7 said:
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
 
B

Blinky the Shark

S

Steve Pugh

Blinky the Shark said:
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
 
B

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.
 
T

Toby Inkster

Joker7 said:
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.
 
J

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,
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top