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




    --
    Never argue with an idiot. They will drag you down
    to their level,and beat you with experience
    Joker7, Mar 31, 2005
    #1
    1. Advertising

  2. Joker7

    Steve Pugh Guest

    "Joker7" <> wrote:

    >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

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

  3. Steve Pugh wrote:
    > "Joker7" <> wrote:


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


    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

    --
    Blinky Linux Registered User 297263
    Who has implemented Usenet Solution #45933:
    Now killing all posts originating at Google Groups
    Blinky the Shark, Mar 31, 2005
    #3
  4. Joker7

    Steve Pugh Guest

    Blinky the Shark <> wrote:
    >Steve Pugh wrote:
    >
    >> 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/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

    --
    "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/>
    Steve Pugh, Mar 31, 2005
    #4
  5. Steve Pugh wrote:

    > Blinky the Shark <> wrote:
    >>Steve Pugh wrote:


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


    Gotcha.

    --
    Blinky Linux Registered User 297263
    Who has implemented Usenet Solution #45933:
    Now killing all posts originating at Google Groups
    Blinky the Shark, Mar 31, 2005
    #5
  6. Joker7

    Toby Inkster Guest

    Joker7 wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 1, 2005
    #6
  7. Joker7

    Joker7 Guest

    "Steve Pugh" <> wrote in message
    news:...
    ::
    : 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. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    5,385
    Jonathan N. Little
    Dec 5, 2005
  2. Nathan Sokalski
    Replies:
    1
    Views:
    422
    Mark Rae [MVP]
    Jul 29, 2007
  3. Ed Hauptman
    Replies:
    7
    Views:
    1,010
    Ed Hauptman
    Aug 7, 2009
  4. ft310
    Replies:
    8
    Views:
    121
    -Lost
    Jun 5, 2007
  5. gray_slp
    Replies:
    3
    Views:
    122
    Geoffrey Summerhayes
    Jun 27, 2007
Loading...

Share This Page