Inline list width problem in Firefox

Discussion in 'HTML' started by TM, Apr 25, 2006.

  1. TM

    TM Guest

    Hi People,

    Weird problem I can't figure out. I have inline lists that work well in
    IE - but in FF there are small spaces between the elements, and the
    width is not applied (the li).

    Can anyone shed any light on this?

    Thanks!

    Code:

    <?xml version="1.0" encoding="utf-8" ?>
    <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Title</title>
    <style type="text/css">
    fieldset {
    background: #def;
    text-align: right;
    border: 0;
    padding: 0;
    margin: 0;
    }
    dl {
    margin: 0;
    padding: 0;
    display: inline;
    }
    dt {
    margin: 0;
    padding: 0;
    background: #fed;
    display: inline;
    height: 40px;
    }
    dd {
    margin: 0;
    padding: 0;
    background: #abc;
    display: inline;
    height: 40px;
    }
    ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline;
    }
    li {
    margin: 0;
    padding: 0;
    background: #cba;
    width: 150px;
    display: inline;
    border: solid 1px #000;
    }
    </style>
    </head>
    <body>

    <fieldset>

    <dl>
    <dt>term</dt>
    <dd>definition</dd>
    <dd class="submit">submit</dd>
    </dl>
    <input type="button" class="submit" />
    </fieldset>

    <fieldset>

    <ul>
    <li>label</li>
    <li>input</li>
    <li>button</li>
    </ul>

    <input type="button" class="submit" />

    </fieldset>
    </body>
    </html>
     
    TM, Apr 25, 2006
    #1
    1. Advertising

  2. TM

    Steve Pugh Guest

    wrote:

    > Weird problem I can't figure out. I have inline lists that work well in
    > IE - but in FF there are small spaces between the elements, and the
    > width is not applied (the li).
    >
    > <?xml version="1.0" encoding="utf-8" ?>
    > <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    > <head>
    > <title>Title</title>
    > <style type="text/css">
    > fieldset {
    > background: #def;
    > text-align: right;
    > border: 0;
    > padding: 0;
    > margin: 0;
    > }
    > dl {
    > margin: 0;
    > padding: 0;
    > display: inline;
    > }
    > dt {
    > margin: 0;
    > padding: 0;
    > background: #fed;
    > display: inline;
    > height: 40px;
    > }
    > dd {
    > margin: 0;
    > padding: 0;
    > background: #abc;
    > display: inline;
    > height: 40px;
    > }
    > ul {
    > margin: 0;
    > padding: 0;
    > list-style-type: none;
    > display: inline;
    > }
    > li {
    > margin: 0;
    > padding: 0;
    > background: #cba;
    > width: 150px;
    > display: inline;
    > border: solid 1px #000;
    > }
    > </style>
    > </head>
    > <body>
    >
    > <fieldset>
    >
    > <dl>
    > <dt>term</dt>
    > <dd>definition</dd>
    > <dd class="submit">submit</dd>
    > </dl>
    > <input type="button" class="submit" />
    > </fieldset>
    >
    > <fieldset>
    >
    > <ul>
    > <li>label</li>
    > <li>input</li>
    > <li>button</li>
    > </ul>
    >
    > <input type="button" class="submit" />
    >
    > </fieldset>
    > </body>
    > </html>


    1. Width doesn't apply to inline elements.

    2. You have white space between your li elements. As you've made these
    elements inline this is the same as white space between b elements and
    you'd expect gaps between <b>one</b> <b>two</b> wouldn't you?

    3. Your fieldsets are missing the mandatory legend element.

    4. The XML declaration before you doctype will trigger quirks mode in
    IE.

    5. Why <input type="button" class="submit" /> instead of <input
    type="submit" /> ?

    Steve
     
    Steve Pugh, Apr 25, 2006
    #2
    1. Advertising

  3. wrote:

    > Weird problem I can't figure out. I have inline lists that work well in
    > IE - but in FF there are small spaces between the elements, and the
    > width is not applied (the li).


    > <?xml version="1.0" encoding="utf-8" ?>


    Your use of an XML prolog (which might[1] be forbidden in documents
    served as text/html, which you need to do to get IE to cope with XHTML)
    triggers Quirks mode in IE.

    In Quirks mode, IE gets a number of things about CSS wrong
    (intentionally). One of these is that is applies the width property to
    elements which are displaying inline (which the CSS 2 spec forbids).

    If you need to set a width on an element and have it horizontally next
    to another element, then floats are usually the solution.

    [1] The spec is very badly written so it is difficult to tell
     
    David Dorward, Apr 25, 2006
    #3
  4. TM

    TM Guest

    Thanks steve - point 2 is brilliant!
    Excuse the missing legend tag - this was just a quick test.
     
    TM, Apr 25, 2006
    #4
  5. TM

    Toby Inkster Guest

    Steve Pugh wrote:

    > 1. Width doesn't apply to inline elements.


    True, but it does apply to inline-block, which is supported by IE, Opera
    and Safari; and to "-moz-inline-box" which is Mozilla's experimental
    implementation of the same thing.

    Try:

    element {
    display: inline;
    display: -moz-inline-box;
    display: inline-block;
    }

    That way a browser will choose the last display property it supports; and
    most will end up with inline-block. Then you'll have an element that
    mostly behaves like it's inline, but with working "height" and "width"
    properties.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Apr 26, 2006
    #5
  6. TM

    hipik

    Joined:
    Feb 23, 2012
    Messages:
    1
    Maybe your list-style-position is set to inside.
     
    hipik, Feb 23, 2012
    #6
    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. AndrewF
    Replies:
    1
    Views:
    807
    Bruce Barker
    Oct 10, 2005
  2. Xu
    Replies:
    11
    Views:
    8,600
    Andrew Thompson
    Jul 16, 2005
  3. Lois
    Replies:
    1
    Views:
    3,304
    Ryan Stewart
    Dec 27, 2004
  4. Abhi
    Replies:
    2
    Views:
    750
    E. Robert Tisdale
    Jul 3, 2003
  5. Coder
    Replies:
    1
    Views:
    712
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
Loading...

Share This Page