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

Discussion in 'HTML' started by Joker7, Mar 31, 2005.

  1. Joker7

    Joker7 Guest

    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;}
     
    Joker7, Mar 31, 2005
    #1
    1. Advertisements

  2. Joker7

    Steve Pugh Guest

    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
     
    Steve Pugh, Mar 31, 2005
    #2
    1. Advertisements

  3. Blinky the Shark, Mar 31, 2005
    #3
  4. Joker7

    Steve Pugh Guest

    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
     
    Steve Pugh, Mar 31, 2005
    #4
  5. Gotcha.
     
    Blinky the Shark, Mar 31, 2005
    #5
  6. Joker7

    Toby Inkster Guest

    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.
     
    Toby Inkster, Apr 1, 2005
    #6
  7. Joker7

    Joker7 Guest

    ::
    : 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 <>
    <http://steve.pugh.net/>

    Thanks Steve,
     
    Joker7, Apr 1, 2005
    #7
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.