...

View Full Version : DropDown menu won't center align in FF



canada4ever
12-01-2006, 02:14 AM
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


/* 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
#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.

harbingerOTV
12-01-2006, 04:04 AM
.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.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum