Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS fixed navigation bar = trouble

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35042
    cadia
    Member

    I need my navigation bar to stay at the bottom of the browser. So far so good I just chose a fixed position bottom=0. It was all perfect until I tried editing some CSS inside the navigation bar. Now my bar is not aligned with the other elements of my page, is way far to the right even though is floating left. It’s only happening on firefox, safaria displays it perfectly. Anyone?
    here’s the CSS that I have for the bar:
    <--!#nav {
    font-size: 13px;
    font-style: normal;
    text-align: right;
    display: inline;
    position: fixed;
    bottom: 0;
    background-color: #FFF;
    height: 100px;
    width: 520px;
    padding-bottom: 5px;
    z-index: 300;
    float: left;
    padding-top: 10px;
    }

    The only thing that I have on that nav bar is an ul, which code is…
    <--!#nav li{
    display:inline;
    margin-left:35px;
    text-align:right;
    padding-top:20px;
    line-height: 80px;
    }

    I don’t understand it was working fine, I made a change, it didn’t work, I put it back the way it was and now it’s all weird (on firefox).

    p.s. is it true that fixed position doesn’t work in IE?

    #90194
    takeiteasy04
    Member

    Do you have a link to the site you’re working on?

    #90202
    standuncan
    Member

    A link would be helpful.

    Also check out “sticky footer”.

    #90209
    WCMiller
    Member

    “p.s. is it true that fixed position doesn’t work in IE?”

    Quirksmode says that only IE6 doesn’t support position:fixed, though IE7 has a bit of a bug.

    Just curious, why is the #nav given “display: inline;”? I would think that block would be more appropriate.

    Were I trying to fix it, I’d try the following:

    • Setting #nav to “display: block;”.
    • Try setting “margin: 0 auto;” to #nav.
    • If that didn’t work, setting “left: 50%;” and “margin-left: -260px;” (half the #nav width) to #nav.

    This is just me guessing blind, however. A link would be very helpful.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.