www.webdeveloper.com
Results 1 to 10 of 10

Thread: problem aligning the list based menu

  1. #1
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747

    problem aligning the list based menu

    hi,
    i got this list based menu im desperately trying to align in both mozilla FF and IE, doesnt seem to work, could u help me?

    http://www.lilcrazyfuzzy.de/problem/align.htm

    btw, it works in moz, but not in IE, so if u dont have the latter, no need to try,

    thx alot!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add to div#nav ul padding:0;
    and change:
    div#nav li{
    display:inline;
    margin-left:25px;
    padding:0;
    width:150px;
    }

  3. #3
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    thx

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273

    Fang - help me out, please.

    I have a similar promblem.
    I have a small menu at the bottom of this page and it looks odd in Firefox - it sits slightly to the left rather than centred as it does in IE. To be honest, I do this with IE in mind because the vast majority of people use it.
    I wonder if you could help me get it centred in both Firefox and IE...

    I'm sorry if the css is a little confusing (it's pretty looong).

    I appreciate any help.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Try replacing position:fixed; with position:absolute; in #footer

  6. #6
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    whats that "position: fixed;" actually? how do u use it?

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It does what it says; fixes an element where it is and is not effected by scrolling.
    IE unfortunately does not understand it.

    Look at this example in FF, Mozilla or Opera and then in IE. The menu top right!

  8. #8
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    I had thought before that that might be the problem, but I've changed that (here ) and it floats to the left in Firefox. I think the reason for this is the way the menu is made (I saw this in this forum) - it uses float:left to build the 'cells' (I think). I could change the menu back to how I had it before, but the code didn't look as 'clean' as this does (lots of spaces and use of '|' ).
    What do you think? Maybe I shouldn't use this code (with the 'float:left')?

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The float:left allows the menu to display horizontally. Usually display:inline is used.
    If it works for you leave it.

    There are however problems with the css. A validation will reveal some of these.
    Other points to note are:
    z-index is a unique number.
    Having multiple elements with the same z-index is pointless and impossible. The browser will change any duplicate values it finds.
    All those position:absolute elements, are they really necessary. Whenever possible leave elements in the natural flow of the document.
    overflow : hidden; in html and body can make you page inaccessible , especially on smaller screens.
    CSS declaration duplication; i.e. font-family and background. Use selector grouping: body, html { font-family: ....}

  10. #10
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    I appreciate the advice and I'm trying to put more things 'in the flow' of the document now (though having crazy problems).
    As for the problem I was asking about (my non-centring menu)... I changed it from 'float:left' to 'display:inline' but it just totally messed it up. What I had before was a div with lots of spans forming the menu with ' | ' between the spans. This actually worked fine, but the code didn't look pretty (if you know what I mean) - I figured cleaner code is generally better.
    Thanks again - maybe I'll get back to you with more problems soon...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles