Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Virginia, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Horizontal List Menu help

    hello, this is my first post! great site by the way

    I have a question about this css/js menu:
    http://www.javascriptkit.com/script/...stopmenu.shtml

    I have tried and tried, but I cannot get the menu to be centered on the page, I gave up on tigra because you could only use absolute positioning ... which is why I started looking for a different system ... thanks!

    edit: I've searched and tried all of the obvious and most common fixes ... any ideas?
    Last edited by pogbobo; 07-18-2007 at 05:07 AM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pogbobo View Post
    I have a question about this css/js menu:
    http://www.javascriptkit.com/script/...stopmenu.shtml

    I have tried and tried, but I cannot get the menu to be centered on the page
    This is not a trivial question if you want a pure CSS solution that works in any of the major browsers including IE6. (A dirty non-CSS solution is to wrap the menu in a real <table> and then center that table using margin: 0 auto)

    Ok, first Firefox. The menu has unknown width so you need the ul element to shrink-wrap [1] around the li elements. Since you want the menu centered it will not help to float the menu. You can use display: table instead. This works in Firefox and other compliant browsers.
    Code:
    .horizontalcssmenu ul{
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: table;
    	margin: 0 auto;
    }
    It does not work in IE6/7 since display: table is not supported. Instead you can use this [2]:
    Code:
    .horizontalcssmenu ul{
    	text-align: center;
    }
    .horizontalcssmenu ul{
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: inline;
    	zoom: 1;
    	text-align: left;
    }
    To combine the styles use a special style sheet for IE that extends the normal style sheet.

    [1] http://www.codingforums.com/showpost...66&postcount=9
    [2] http://www.brunildo.org/test/shrink_center_3.html
    [3] http://www.cssplay.co.uk/menus/centered.html

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Virginia, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply ... still no luck tho ...

    this code resulted in no change in IE7:
    Code:
    .horizontalcssmenu ul{
    	text-align: center;
    }
    .horizontalcssmenu ul{
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: inline;
    	zoom: 1;
    	text-align: left;
    }
    so I thought maybe the second part was a type-o and was supposed to be for ul and li so I tried this:
    Code:
    .horizontalcssmenu ul{
    text-align: center;
    }
    
    /*Top level list items*/
    .horizontalcssmenu ul li{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline;
    zoom: 1;
    text-align: left;
    }
    which resulted in this, which is close, but now the child elements are all out of whack:


    any ideas??

    edit: i just gave up and threw it in a table with margin: 0 auto ... oh well ... but the "rest of content" p is now above the menu haha
    Last edited by pogbobo; 07-18-2007 at 09:26 PM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pogbobo View Post
    thanks for the reply ... still no luck tho ...
    Sorry, my mistake... I made a typing error.

    Instead of this:
    Code:
    .horizontalcssmenu ul{
    	text-align: center;
    }
    use this:
    Code:
    .horizontalcssmenu {
    	text-align: center;
    }
    The key to understanding the solution for IE is that the ul element behaves like display: inline-block when you set it to zoom: 1 and display: inline. IE5/6/7 does not support display: inline-block on naturally block-level elements.

    Did you manage to separate the styles for IE and non-IE browsers?


  •  

    Posting Permissions

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