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 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DropDown menu won't center align in FF

    Hi, I've been working on a site for my high school. I've got a problem with the menu. It is centered in the middle of the page when viewed in ie6 but when viewed in FF it's aligned to the left. Here's the page http://matthewiscool.sitesled.com

    Here's the whole pages css. The menu is in the div called menu_block

    Code:
    /* CSS Document */
    
    body {
    
    background:#fefef8;
    
    color: #000;
    
    font-family: georgia, "times new roman", times, serif;
    
    padding: 0;
    
    padding-top:10px;
    
    padding-bottom:10px;
    
    margin:0;
    
    font-size:76%;
    
    }
    
    * html .container {
    
    margin-left: -700px;
    
    position: relative;
    
    }
    
    /*\*/
    
    * html .container, * html .content {
    
    height: 1px;
    
    }
    
    /**/
    
    .content {
    
    padding: 0px;
    
    }
    
    .width {
    
    width: 90%;
    
    min-width: 700px;
    
    margin:0 auto;
    
    height:100%;
    
    }
    
    * html  .minwidth {
    
    padding-left: 700px;
    
    }
    
    /*\*/
    
    * html .minwidth, * html .layout {
    
    height: 1px;
    
    }
    
    /**/
    
    #header {
    
    height:65px; 
    
    text-align:center; 
    
    border-bottom:2px solid #000000;
    
    background-image: url('../images/background.gif');
    
    background-repeat: repeat;
    
    position:relative;
    
    }
    
    * html #header {
    
    top:2px;
    
    }
    
    
    
    #menu_block {
    
    top:36px;
    
    left:0px;
    
    margin:0 auto;
    
    }
    
    
    
    
    
    #border {
    
    top:0px;
    
    border-top:1px solid #000000;
    
    margin-left:10px;
    
    margin-right:10px;
    
    }
    
    
    
    #footer {
    
    height:60px; 
    
    text-align:center; 
    
    border-top:2px solid #000000;
    
    background-image: url('../images/background_bottom.gif');
    
    background-repeat: repeat;
    
    position:relative;
    
    }
    
    * html #footer {
    
    bottom:0px; height:60px;
    
    }
    
    
    
    #bottom_border {
    
    bottom:1px;
    
    border-top:1px solid #000000;
    
    margin-left:25px;
    
    margin-right:25px;
    
    position:relative;
    
    }
    
    
    
    #container {
    
    height:695px;
    
    }
    
    #content {
    
    height:570px;
    
    padding:0px;
    
    border-left:1px solid #000000;
    
    border-right:1px solid #000000;
    
    overflow:hidden;
    
    }
    
    
    
    
    
    #date {
    
    top:10px;
    
    left:0px;
    
    width:160px;
    
    height:25px;
    
    }
    
    
    
    #links {
    
    top:2px;
    
    width:350px;
    
    height:25px;
    
    margin:0 auto;
    
    }
    
    
    
    #search {
    
    top:5px;
    
    right:0px;
    
    width:200px;
    
    height:25px;
    
    z-index:6;
    
    }
    
    
    
    #banner {
    
    top:0px;
    
    left:0px;
    
    height:115px;
    
    z-index:4;
    
    background-image: url(../images/banner.gif);
    
    background-repeat: no-repeat;
    
    }
    
    
    
    #leftcontent  {
    
    top:192px;
    
    left:5%;
    
    width:160px;
    
    height:440px;
    
    position:absolute;
    
    z-index:-1;
    
    }
    
    
    
    *html #leftcontent  {
    
    top:182px;
    
    left:0px;
    
    width:160px;
    
    height:460px;
    
    position:absolute;
    
    }
    
    
    
    #copyright {
    
    height:25px;
    
    width:400px;
    
    padding-top:5px;
    
    margin:auto;
    
    }
    
    
    
    #swd {
    
    height:20px;
    
    width:400px;
    
    padding-top:0px;
    
    margin:auto;
    
    font:Arial, Helvetica, sans-serif;
    
    }
    
    
    
    .text {
    
    padding-left:170px;
    
    padding-right:10px;
    
    border-top: 1px solid #000000;
    
    }
    
    
    
    .absolute {
    
    	position:absolute;
    
    }
    
    
    
    .relative {
    
    	position:relative;
    
    	}
    
    
    
    
    
    .event {
    
    padding-left:5px;
    
    }
    
    
    
    
    
    /* Start of Top Menu*/
    
    /* style the outer div to give it width */
    
    .menu {
    
    width:685px; font-size:1.5em;
    
    font-family:Verdana, Arial, Helvetica, sans-serifs
    
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    
    .menu ul {
    
    padding:0;
    
    margin:0;
    
    list-style-type:none;
    
    }
    
    .menu ul ul {
    
    width:125px;
    
    }
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    
    .menu li {
    
    float:left;
    
    width:137px;
    
    position:relative;
    
    }
    
    *html .menu li {
    
    width:135px;
    
    }
    
    /* style the links for the top level */
    
    .menu a, .menu a:visited {
    
    display:block;
    
    font-size:11px;
    
    text-decoration:none; 
    
    color:#000000; 
    
    width:125px; 
    
    height:30px; 
    
    background-image: url(../images/button.gif);
    
    background-repeat: no-repeat;
    
    padding-left:10px; 
    
    line-height:29px;
    
    }
    
    /* a hack so that IE5.5 faulty box model is corrected */
    
    * html .menu a, * html .menu a:visited {
    
    width:120px;
    
    w\idth:124px;
    
    }
    
    /* style the second level background */
    
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    
    background:#ff0100;
    
    }
    
    /* style the second level hover */
    
    .menu ul ul a.drop:hover{
    
    background:#d80200;
    
    }
    
    .menu ul ul :hover > a.drop {
    
    background:#ff0100;
    
    }
    
    /* style the third level background */
    
    .menu ul ul ul a, .menu ul ul ul a:visited {
    
    background:#d80200;
    
    }
    
    
    
    /* style the third level hover */
    
    .menu ul ul ul a:hover {
    
    background:#d80200;
    
    }
    
    .menu ul ul ul :hover > a{
    
    background:#ff0100;
    
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    
    .menu ul ul {
    
    	position:absolute;
    
    	height:0;
    
    	top:30px;
    
    	left:0;
    
    	width:125px;
    
    	visibility: hidden;
    
    }
    
    /* another hack for IE5.5 */
    
    * html .menu ul ul {
    
    top:30px;
    
    t\op:31px;
    
    }
    
    /* position the third level flyout menu */
    
    .menu ul ul ul{
    
    left:125px; top:0;
    
    width:125px;
    
    }
    
    /* position the third level flyout menu for a left flyout */
    
    .menu ul ul ul.left {
    
    left:-125px;
    
    }
    
    /* style the table so that it takes no part in the layout - required for IE to work */
    
    table {position:absolute; top:0; left:0;}
    
    /* style the second level links */
    
    .menu ul ul a, .menu ul ul a:visited {
    
    background:#d80200; color:#000; height:auto; line-height:1em; padding:5px 10px; width:115px
    
    
    
    /* yet another hack for IE5.5 */
    
    }
    
    
    
    *html .menu ul ul a, .menu ul ul a:visited {
    
    width:114px
    
    }
    
    
    
    * html .menu ul ul a{
    
    width:129px;
    
    w\idth:114px;
    
    }
    
    /* style the top level hover */
    
    .menu ul ul a:hover{
    
    color:#fff; background:#ff0100;
    
    }
    
    .menu :hover > a, .menu ul ul :hover > a {
    
    color:#fff;
    
    background-image: url(../images/button.gif);
    
    background-repeat: no-repeat;
    
    }
    
    /* make the second level visible when hover on first level list OR link */
    
    .menu ul :hover ul{
    
    visibility:visible;
    
    }
    
    /* keep the third level hidden when you hover on first level list OR link */
    
    .menu ul :hover ul ul{
    
    visibility:hidden;
    
    }
    
    /* keep the fourth level hidden when you hover on second level list OR link */
    
    .menu ul :hover ul :hover ul ul{
    
    visibility:hidden;
    
    }
    
    /* make the third level visible when you hover over second level list OR link */
    
    .menu ul :hover ul :hover ul{ visibility:visible;
    
    }
    
    /* make the fourth level visible when you hover over third level list OR link */
    
    .menu ul :hover ul :hover ul :hover ul { visibility:visible;
    
    }
    
    /* End of Top Menu */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .style1 {font-weight: bold}
    And here's the css for the menu
    Code:
    #menu {list-style-type:none; margin:0 auto 100px auto; padding:0; width:608px;}
    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
    #menu li dl {position:absolute; top:0; left:0; padding-bottom:0;}
    #menu li a, #menu li a:visited {text-decoration:none;}
    #menu li dd {display:none;}
    #menu li a:hover {border:0;}
    #menu li:hover dd, #menu li a:hover dd {display:block;}
    #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
    #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
    #menu dl {width: 150px; margin: 0; padding: 0; background: transparent;}
    #menu dt {margin:0; padding: 0;}
    
    #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
    
    #menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #000000; text-align:center; border:1px solid #000000; border-width:0 1px 1px 1px; background:#990000; padding:0.25em 0 0.75em 0;}
    
    #menu li:hover dt a, #menu a:hover dt a {color:#ffffff; background:#AE1B1B; border:1px solid #000000; border-width:0 1px 1px 1px;}
    
    #menu dd a, #menu dd a:visited {background:#990000; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #000000; border-right:1px solid #000000;}
    
    #menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #000000; border-right:1px solid #000000;}
    
    #menu b {display:block; overflow:hidden; height:1px;}
    
    #menu b.p1 {background:#000000; margin:0 5px;}
    #menu b.p2 {background:#990000; border:2px solid #000000; border-width:0 2px; margin:0 3px;}
    #menu b.p3 {background:#990000; margin:0 2px; border:1px solid #000000; border-width:0 1px;}
    #menu b.p4 {height:2px; background:#990000; margin:0 1px; border:1px solid #000000; border-width:0 1px;}
    #menu b.p5 {background:#000000; margin:0 5px;}
    #menu b.p6 {background:#000000; margin:0 3px;}
    #menu b.p7 {background:#000000; margin:0 2px;}
    #menu b.p8 {height:2px; background:#000000; margin:0 1px;}
    
    #menu li:hover b.p2, #menu a:hover b.p2 {background:#AE1B1B;}
    #menu li:hover b.p3, #menu a:hover b.p3 {background:#AE1B1B;}
    #menu li:hover b.p4, #menu a:hover b.p4 {background:#AE1B1B;}
    I'd appreciate any help you could offer.
    Thank you very much.
    Matthew.
    Last edited by canada4ever; 12-01-2006 at 02:21 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    .menu {
    
    width:685px; font-size:1.5em;
    
    font-family:Verdana, Arial, Helvetica, sans-serifs
    
    margin: 0 auto;
    }
    try that out.

    IE6 will text align anythign. sonce your header is text align center is does just that.not sipposed to bu toh well.

    since you ave the width you can apply the margin: 0 auto (maing the left and right margins automatic thus finding the center.)
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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