|
CSS - Centering Menu Elements In Mozilla/ie Explorer
How do I align menu elements of my menu?
In Mozilla the elements are leaning conpletely to the left of the screen and doing somewhat what they're supposed to do in internet explorer. To put it simply I'd just like to have the same style class used to center the menu items in both Mozilla and Internet explorer. Heres the html page : Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="thisstyle CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a href="users/register.php">Join</a></li>
<li><a href="users/Log_in.php">Login</a></li>
<li><a href="users/help/tour.html" >Tour</a></li>
<li><a href="users/contact.php">Contact</a></li>
</ul>
</div>
</body></html>
Heres the css style sheet : Code:
#menu {
clear: both;
margin: 30; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Lucida Console;
height: 26px;
background: #006633;
}
#menu ul {
float: left;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: left;
padding-top: 0px;
padding-right: 28px;
padding-bottom: 0px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ffff33;
color: #006633;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
Thanks Similar TutorialsHey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Good evening, I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts? website - http://www.squadron282.com CSS Code: Code:
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
HTML Code: Code: <div class="nav2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="missions.html" class="selected">CAP Missions</a></li> <li><a href="sqinfo.html">Squadron Info</a></li> <li><a href="commanderscorner.html">Commander's Corner</a></li> <li><a href="resources.html">Member Resources</a></li> <li><a href="pics.html">Photo Gallery</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </div> i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie..... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ranid Photo Gallery</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff"> <div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;"> <h1>Ranid Frog Photos</h1> <p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0> <tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr> </table></p> <h5>:<a href="gallery.html">Back to the Gallery</a>:</h5> </body> </html> My style sheet Code:
body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
any ideas? Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> http://www.djoj.net/home.html <- Faulty Page http://www.djoj.net/style.css <- CSS Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school. Thank you, ~Brendan The Website in Question I just started to remake my portfolio site from scratch, and since I'm a crappy coder, I ran into a brick wall right away. It was easy horizontally and vertically centering the tan rectangle, but for the life of me I can't get the green sliding panel where I want it, and have it otherwise horizontally and vertically centered at all times. How I want it: Example I think the problem may be a conflict between the javascript that enables the sliding function of the green panel and the CSS trying to center it. The javascript demands absolute positioning of the two divs (the part that says "PORTFOLIO" and the part that slides right), because that's what tells the sliding panel where to slide and expand to. However, the CSS demands relative positioning, in order to position the panel a percentage down the page, and half its height in pixels back up again, as well as the horizontal alignment. Below is the source code for the site. At the moment, the sliding panel (its code is shown in blue) is set to be in the top left corner of the site, but it obviously isn't. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title></title>
<style type='text/css'>
body, html {
height:100%;
}
#container{
height:100%;
text-align: center;
}
#panel {
width: 700px;
height: 500px;
position:relative;
top:50%;
margin-top:-257px;
left:50%;
margin-left:-350px;
}
body {
background-image: url(bg3.gif);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="panel"><img src="work.png"></div>
</div>
<script type="text/javascript" src="Animation.js"></script>
<div style="position:relative;
width:350px;
height:520px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:50px;
height:500px;
top:0;
left:0px;
background:#298b12;
text-align:center;
color:#FFFFFF;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;"
onclick="runAnimation(animationObject, this)">
<img src="pf.png">
</div>
<div id="examplePanel"
style="position:absolute;
width:0px;
height:500px;
top:0px;
left:50px;
background:#ac926d;
background-image: url(pbg.gif);
background-position:right top;
overflow:hidden;
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;"
align="center"
overflow:hidden;">
Content
</div>
</div>
<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(50, 0, 210, 500, 400));
function runAnimation(animation, header) {
if(header.check) {
animation.RunBackward();
header.check = false;
}
else {
animation.RunForward();
header.check = true;
}
}
</script>
</body>
</HTML>
I just can't seem to get my code to work. Can anybody offer any help to solve this problem? I'd really appreciate it. I am trying to have an element that will float above the others on the page and also be centered. When I make the position absolute, it will float above the others, but won't center (dynamically with window resize) and if I make the position auto, it will center but not float above the others. Here is the style: Code:
.main {
position:auto;
margin: 0px auto;
text-align: center;
width: 800px;
background-color:red;
z-index:1;
}
Thank you Nevermind: solved I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! I am having problems getting my menu to align, I found the menu system at. http://www.gazingus.org/html/Using_...HTML_Menus.html However when you try and center it using tables or divs you get the result you can see in the attached image. Strange thing it works fine in firefox, and sort of okay in opera, though its not centered and the menu is a little bugged. I just can't think what causing the problem and its annoying me. I've attached all the files in zip file for people to explore and see were i am going wrong. thanks Hi I have been working on this all day, and am starting to see double This site plays nice on all browsers except IE , the top menu that is lastchancemusic.gr/testing/ could anyone please help I have made a CSS dropdown menu which works O.K. on Safari and Firefox but on Explorer, I loose my dropdown menu and all I see is an orange line. Funny thing is, that it works OK on Explorer 8 on vista but not Explorer 8 on XP??? Explorer 5 and 6 is a problem and probably other Explorer versions. I can't recall whether I read somewhere that I have to put a hack line of code somewhere for it to work on Explorer??? Can someone help please? I need it to work properly on all browsers and platforms. Does my code look alright? CSS code: Code:
#menu {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 17px;
}
.submenuHead {
font-family:Arial, Helvetica, sans-serif;
color:#A7A9AC;
font-size:11px;
font-weight:none;
}
#nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER: 0px, none; WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav LI {
FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 17px; POSITION: relative; border:0px;
}
#nav LI UL {
MARGIN-TOP: -50px; LEFT: -999em; MARGIN-LEFT: 121px; POSITION: absolute;
}
#nav LI A {
BORDER-RIGHT: none 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: none 0px solid; DISPLAY: block; PADDING-LEFT: 0px ; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: none 0px solid; WIDTH: 121px; COLOR: none; PADDING-TOP: 0px; BORDER-BOTTOM: none 0px solid; BACKGROUND-COLOR: none; TEXT-DECORATION: none;
}
#nav LI2 A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #F2F2F2; TEXT-DECORATION: none;
}
#nav LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #FBB568;
}
#nav LI:hover UL {
LEFT: auto;
}
#nav LI LI:hover UL {
LEFT: auto;
}
#nav LI.sfhover UL {
LEFT: auto;
}
This goes to the HTML: Code: <div id="menu">
<UL id=nav>
<LI><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuBtn','','images/menu1.jpg',1)"><img src="images/menu2.jpg" name="menu" width="121" height="17" border="0" rel="balloon1"></a></span>
<UL>
<LI2><a href="http://www.sample1.com" target="_blank" class="submenuHead">Sample1</a></LI2>
<LI2><a href="http://www.sample2.com" target="_blank" class="submenuHead">Sample2</a></LI2>
<LI2><a href="http://www.sample3.com" target="_blank" class="submenuHead">Sample3</a></LI2>
</UL>
</LI>
</UL>
</div>
Hi All: Im having a difficult time trying to center a menu on my site. ANy help greatly appreciated. Here is the temporary page margueritewedwardsartist. com / home1. htm and here is the css code im using. all i changed was thew text-align:center on the 2nd line. all other code was generated by the menu maker. Any help is greatly appreciated. chris ------------------- .bg {background: url(images/button4.gif);} .menu {text-align:center; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu li.top {display:block; float:left; position:relative;} .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;} .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;} .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;} .menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;} .menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;} .menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;} .menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;} .menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;} .menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;} .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} .menu a:hover {visibility:visible;} .menu li:hover {position:relative; z-index:200;} .menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;} .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;} .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} .menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;} .menu :hover ul.sub li a:hover {background:#999999; color:#fff;} .menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;} Hi, I cannot get the main menu on this site to center correctly in Firefox: Code is: PHP Code: #navcontainer { background: url(../../images/background_main_menu.jpg); height: 33px; width: 590px; font: 12px Verdana, sans-serif; } #navlist { margin: 0; } #navlist ul, #navlist li { margin: 0; display: inline; list-style-type: none; vertical-align: middle; padding-left: 5px; padding-right: 5px; } #navlist a:link, #navlist a:visited { font-weight: bold; margin: 0 2px 4px 2px; text-decoration: none; color: #FFFFFF; } #navlist a:hover { color: #527D24; } <div align="center"> <div id="navcontainer"> <ul id="navlist"> <li style="padding-bottom: 14px;"><a href="index.php">home</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">about</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">services</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="links.php">links</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">gallery</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">contact</a></li> </ul> </div> </div> Hi, I have a client that wanted me to develop a horizontal navigation menu bar along with a sub-menu that appears horizontal right under the original. My question is, is with the code that I have, I cannot seem to center the menu elements so that either the links are centered on the navigation bar, or so that the width of the links spread out across the whole bar. I have tried numerous tasks such as switching paddings, margins, and width of certain elements, but if anyone can help me find a solution that would be great. I have it hosted if you want to see what it looks like to get an idea. jelc.hostzi.com/Home CSS: Code: .droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 800px;
border-top-style: ridge;
border-top-width: 2px;
border-bottom-style: ridge;
border-bottom-width: 2px;
font: bold 13px Arial;
background: #242c54 url('../Images/bluedefault.gif') center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white; background: transparent url('../Images/blueactive.gif') center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0; top: 0;
background: #303c76; /*sub menu background color */ visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{
/*sub menu links' background color onMouseover */
background: #242c54; }
Thanks for all of the help in advance! I am having a lot of trouble with a menu I created. It works fine in firefox, but does not display properly in IE. I created a page with images and code to explain the problem he chrisbanker.com/cb_com_new/help.html If anyone could help me out, that would be great. This is the one thing that is holding me back from putting this new site up. Please reply or email cbanker[at]gmail[dot]com if you have any advice. Thanks, Chris I'm an idiot when it comes to CSS, so please bare with me as I pose this seemingly simple question... Seems as if I've tried everything, playing with all of the properties in Firebug, but to no avail. I simply want this menu centered with some extra padding between the items. Please help! The live site is at www.danazilber.com/content. Code: .screen-reader-text { position: absolute; left: -9000px; } #access { /* display: block; float: left; margin: 0 auto; width: 940px; */ float: left; margin-top: 30px; } #access .menu-header, div.menu { font-size: 13px; margin: 0 auto; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #363636; font-size: 13px; text-transform:uppercase; display: block; /*line-height: 30px;*/ padding: 0 10px; padding-bottom: 10px; text-decoration: none; font-weight: bold; } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; /*top: 30px;*/ left: 0; float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul { left: 100%; top: 0;} #access ul ul a { background: #FFF; color: #6A6A6A; line-height: 1em; padding: 10px; width: 160px; height: auto; font-size:10px;} /* #access li:hover > a, #access ul ul :hover > a { background: #333; color: #fff;} */ #access li:hover > a { color:#888; } #access ul ul :hover > a { background: #ACCB50; color: #FFF;} #access ul li:hover > ul { display: block; } /* #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #6A6A6A; } */ * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #fff; }
I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show. Here's my CSS for IE: Code: div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}
ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}
ul.menu li {
float:left;
}
ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}
ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}
a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}
And my HTML: Code: <body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
<tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
<tr bgcolor="#FFFFFF" height="227">
<td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
<div class="menu">
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
</ul>
</div><br />
</div> </td>
</tr>
</table>
</td></tr></table>
</div>
</body>
Any help would be appreciated. Hello, I have a vertical menu on the left hand side of my page that I'm working on. I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment. Here's the code I'm using for the menu: Code:
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}
#menu li {
margin-bottom: 4px; /* space between each menu item */
}
#menu li a { /* text */
font-weight: bold;
height: 25px; /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
If anyone could help me out that'd be great. Thanks! |
|||||||