float problem in Firefox

Discussion in 'HTML' started by squareboy, Aug 2, 2006.

  1. squareboy

    squareboy Guest

    The simple HTML & CSS below uses float:left and float:right to display
    the three <li>'s on the same line. This works on IE, and it also works
    on Firefox if there is no <a href> tag inside the <li>. But Firefox
    puts the "should be on the same line" link on the following line. Any
    advice on how to get it to stay on the same line?

    TIA


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css" media="screen">@import "style.css";</style>
    </head>
    <body>
    <ul class="header">
    <li>first</li>
    <li>second</li>
    <li class="sitelink"><a href="http://www.abc.com/">should be on same
    line</a></li>
    </ul>
    </body>
    </html>

    style.css:

    ..header li {
    float:left;
    }
    ..header a {
    float:left;
    display:block;
    }
    ..header .sitelink {
    float:right;
    }
    ..header .sitelink a {
    float:right;
    }
    squareboy, Aug 2, 2006
    #1
    1. Advertising

  2. squareboy

    squareboy Guest

    squareboy wrote:
    > The simple HTML & CSS below uses float:left and float:right to display


    Here's a link to make it easier to repro:

    http://www.maxuk.net/what2.html

    Thanks for any advice.
    squareboy, Aug 2, 2006
    #2
    1. Advertising

  3. squareboy

    dorayme Guest

    In article
    <>,
    "squareboy" <> wrote:

    > The simple HTML & CSS below uses float:left and float:right to display
    > the three <li>'s on the same line. This works on IE, and it also works
    > on Firefox if there is no <a href> tag inside the <li>. But Firefox
    > puts the "should be on the same line" link on the following line. Any
    > advice on how to get it to stay on the same line?
    >
    > TIA


    > style.css:
    >
    > .header li {
    > float:left;
    > }
    > .header a {
    > float:left;
    > display:block;
    > }
    > .header .sitelink {
    > float:right;
    > }
    > .header .sitelink a {
    > float:right;
    > }


    Get rid of all your css on this and replace with

    ..header li {
    display:inline;
    }

    add margins and padding appropriately. You are getting too fancy.

    --
    dorayme
    dorayme, Aug 2, 2006
    #3
  4. squareboy

    dorayme Guest

    In article
    <>,
    "squareboy" <> wrote:

    > squareboy wrote:
    > > The simple HTML & CSS below uses float:left and float:right to display

    >
    > Here's a link to make it easier to repro:
    >
    > http://www.maxuk.net/what2.html


    A nice example of what is wrong with justified text... You need
    to find out how to screen snap relevant rectangles and/or crop
    pics.

    --
    dorayme
    dorayme, Aug 2, 2006
    #4
  5. squareboy

    squareboy Guest

    dorayme wrote:
    > Get rid of all your css on this and replace with
    > ...
    > add margins and padding appropriately. You are getting too fancy.


    It would be too fancy if this was all I was trying to achieve, but the
    code I'm giving here is massively simplified to leave just the
    underlying problem: that the link appears on the following line in
    Firefox.

    Interested to see if anyone actually knows how to fix this.

    Cheers
    squareboy, Aug 2, 2006
    #5
  6. squareboy

    dorayme Guest

    In article
    <>,
    "squareboy" <> wrote:

    > dorayme wrote:
    > > Get rid of all your css on this and replace with
    > > ...
    > > add margins and padding appropriately. You are getting too fancy.

    >
    > It would be too fancy if this was all I was trying to achieve, but the
    > code I'm giving here is massively simplified to leave just the
    > underlying problem: that the link appears on the following line in
    > Firefox.
    >
    > Interested to see if anyone actually knows how to fix this.
    >
    > Cheers


    Fair enough... you sure that the nav bar cannot be an isolated
    bit of code along the lines I suggest, easier to manage than the
    float... but good luck...

    --
    dorayme
    dorayme, Aug 3, 2006
    #6
  7. squareboy

    Neredbojias Guest

    To further the education of mankind, "squareboy" <>
    vouchsafed:

    > The simple HTML & CSS below uses float:left and float:right to display
    > the three <li>'s on the same line. This works on IE, and it also works
    > on Firefox if there is no <a href> tag inside the <li>. But Firefox
    > puts the "should be on the same line" link on the following line. Any
    > advice on how to get it to stay on the same line?
    >
    > TIA


    Delete both css entries for the "a"s.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Aug 4, 2006
    #7
  8. squareboy

    Andy Dingley Guest

    squareboy wrote:

    > It would be too fancy if this was all I was trying to achieve, but the
    > code I'm giving here is massively simplified to leave just the
    > underlying problem:


    That's why we don't usually respond to posted code, only to URLs.



    You're trying to mix and match display: block and display: inline.
    Either make your block eleemnts behave as inline, or else stop trying
    to make an <a> behave in a block-like manner (floats, width etc.)
    Andy Dingley, Aug 4, 2006
    #8
    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. Andy
    Replies:
    7
    Views:
    6,248
    Roedy Green
    May 10, 2004
  2. Jim West
    Replies:
    4
    Views:
    1,428
    Jeff Schwab
    Jan 16, 2004
  3. Jukka Lehtonen

    operator== (float, float)

    Jukka Lehtonen, Aug 4, 2004, in forum: C++
    Replies:
    5
    Views:
    2,421
    Jukka Lehtonen
    Aug 5, 2004
  4. bd
    Replies:
    0
    Views:
    615
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,526
    James Kanze
    Oct 8, 2009
Loading...

Share This Page