CSS - List Menu

Hi,

I am working on this website atm: www.powys.gov.uk

I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g:

Code:

   My Menu Link
Has been wrapped

I want it to be like:

Code:

  My Menu Link
  Has been Wrapped

The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas.


Regards,
Graham

I'm embedding menumatic into a joomla 1.6 based website.
Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic

Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page.

Anybody have any ideas about how i can do this?
(In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work )

below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment.

Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think).

Anybody have an idea about how to get around this?

I tried to justify the text (that would be fine for my purposes), but it didn't work either.


CSS:

Code:

#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
.menuMain a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#036 ;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
	margin:0;
	float:left;
        color:#fff;
        
}

/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
	
}

/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#06c ;
	color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
.menuMain a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
	background-color:#06c ;
	color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin:0 20px 0 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here*/	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#036;	
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
.menuMain li { 

	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
margin:0 5px;
	position:relative;
	float:left;

}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
.menuMain{
	display:block;
	list-style:none;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:40px;
	margin-right:auto;
	z-index:5;
	text-align: center;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{	float:none; }

.menuMain li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

.menuMain li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
.menuMain li:hover ul{	margin-left: 0; }
.menuMain li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }

The menu html (an excerpt)
Code:

<html>
<head>
<link rel="stylesheet" href="MenuMatic.css" type="text/css" />
</head>
<body>
<div id="mainMenu" style="width:950px;">
					
<ul class="menuMain"> 

	<li id="item-101" class="current active"><a href="/ottest/" >Home</a></li>
	<li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a>
		<ul>
			<li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li>
		</ul>
	</li>
	<li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li>
	<li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li>
	<li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li>
	<li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li>
</ul> 
	
</div>
</body>
</html>

Hi;
I got two problem in my code.
1) a list of menu could not sit in the center.

2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top.
How could i sit the list of menu in the center and there are about 1px gas or not
gas between the top and the menu bar in IE and Firefox.

my code as following;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  body {
         font: 80% arial, helvetica, sans-serif;
         background: white;
         margin: 0;
       }
#container{
   
    position: relative;
    width: 780px;
    w\idth: 780;
    border: solid #036;
    border-width: 0 3px;
    margin: auto;
 }

#navlist
{
  color: white;
  text-align: center;
  list-style-type: none;
  padding-bottom: 1px;
 
     
}

#navlist li
{
  bacground-color: #4c56d9;
  margin-left: 1px;
  display: inline;
  border: 3px solid #4c56d9;
  padding: 1px;
  
}

#navlist li a
{
  text-decoration: none;
  border: 2px solid #737be4;
  padding: 2px;
  color: white;
  margin-left: 1px;
  background-color: #4c56d9;
}
  


	
	
</style>
</head>

<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>

</html>

I'm trying to create a menu using 'list' but so far without much success :-(

Problems?

Not displaying horizontally in browser.

Can't center text in box.

Adding 'padding' didn't work.

Any help would be much appreciated,

Mike

P.S. Please ignore the colors ;-)

//paste.pocoo.org/show/207718/

Please add http to the above - I'm not yet allowed to ..

If you take at the link below I'm having trouble with the top menu.

http://departments.brooklands.ac.uk/ifp/test/

I'm trying to use background images as buttons with normal xhtml text links.

But I can't seem to get the text in the middle of the buttons.

I think I may be going about this in the wrong way, so if anyone could take a look that would be great.

Thanks

Jemes

Code:

#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}

#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}

#topmenu ul{
    margin:0px;
    padding:0px;
list-style-type: none;
}

#topmenu ul li{
    padding-right:4px;
}

.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}

.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.


I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.

Hi,

I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter.

The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space.

The code for this element:

Code:

#menu ul {
list-style: none;
margin: 0;
padding: 0;

/*change for IE6*/
/*width: 7em;*/

/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/

/*
width: auto;
min-width: 40px;
*/

float: left;
}

Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically.

After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible?

Thanks.

Hi,

I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong.

How can I remove the circle bullets from the expanding menus on this page ?

Thanks

Hello All,

I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it.

I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically).

I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet.

Here is the CSS:
Code:

/*- Menu Tabs E--------------------------- */

    #tabsE {
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }

    #tabsE ul {
        margin:0;
        padding:10px 10px 0 0px;
        list-style:none;
      }

    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }

    #tabsE a {
      text-align: center;
      background:url("tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

    #tabsE a span {
      text-align: center;
      display:block;
      background:url("tabrightE.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#000;
      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFFFFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }

        #tabsE #current a {
                background-position:0% -42px;
        }
        #tabsE #current a span {
                background-position:100% -42px;
        }

I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary.

I truly appreciate any help you can offer.

Thanks,

Chris

I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right.

Here is the web page

The top navigation bar has a link "Other regions".

I want to have a drop down list of the other regions under it.

I nested a list under the "Other regions" li. It is working - sort of but not correctly.

The nested list is showing up under "home" and the are all on top of each other.

Here is the html:
Code:

	<div id="topbar">
  	<ul>
		
      <li><a href="index.html">Home</a></li>
		
      <li><a href="about_us/about_us.html">About Us</a></li>
		
      <li class="dropmenu"><a href="other_regions.html">Other Regions</a> 
        <ul>
          <li><a href="#">Ireland</a></li>
          <li><a href="#">Germany</a></li>
          <li><a href="#">USA (North America)</a></li>
          <li><a href="#">Latin America</a></li>
          <li><a href="#">Other</a></li>
        </ul>
      </li>
   	</ul>
  	</div>

Here is the css:
Code:

#topbar {
	height: 20px;
	background-color: #3399FF;
	border: 1px solid #000099;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	color: #FFFFFF;
	background-color: transparent;
	border: 1px solid #3399FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar a:hover, #topbar a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar ul {
	list-style: none;
	margin: 1px 0px 1px 0px;
	padding: 2px 0px 0px 0px;
}

#topbar li {
	display: inline;
	margin-right: 150px;
}


.dropmenu ul  {
	position: relative;
}

.dropmenu li  {
	position: absolute;
	
}

.dropmenu  a:link, .dropmenu  a:visited {
	color: #000000;
	background-color: transparent;
	border: 1px solid #FF00FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu  a:hover, .dropmenu  a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu li:hover ul { display: block; }


/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 519px;
	background: url(../images/bgcol.gif) repeat-y;
	padding: 0px;
	margin: 0px;
}

Help please

Hi, I have a site with a horizontal menu bar that has a submenu that pops up with the top menu is hovered over. I've got everything working fine, except for one little thing; in Firefox the submenu is vertically aligned instead of horizontally. For once IE has gotten it right (or at least the way I want it) by positioning the sub menu horizontally. I can't for the life of me figure out how to get the sub menu to flow horizontally in FF. I've tried display: inline and float: left and all kinds of things but nothing seems to affect it.

My site is here

http://www.soton.ac.uk/~rollhock/new/index3.php

And the css file

http://www.soton.ac.uk/~rollhock/new/includes/style.css

If anyone is able to help I will be eternally grateful!
Thanks

ASP css database List menu. Tested in IE6, IE7 and Firefox OK.

Check it out and respond to my blog if problems.
Has single click editing of menu items, iframe masks over objects, SQL server and access databases supplied and ready to test.

css List database Menu version 1.0.0 :
being a new forum user I cannot add url links, so copy and paste blog address below

rwstewart.blogspot.com

Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now )

I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this?

Here's the general layout:
PHP Code:
// .main is the style for the container
// #main is the positioning of this instance of main
// .tree_menu_list is the vertical stuffs
<div class="menu" id="main">
   <ul class="tree_menu_list">
      <li><a href="index.php">Home</a></li>
      <li><a href="index.php?p=vision">Vision</a></li>
      <li><a href="index.php?p=buying">Buying</a></li>
      <li><a href="index.php?p=renovation">Building</a></li>
      <li><a href="index.php?p=selling">Selling</a></li>
      <li><a href="index.php?p=payout">Payout</a></li>
      <li><a href="index.php?p=opportunities">Opportunities</a></li>
      <li><a href="index.php?p=services">Services</a></li>
      <li><a href="images.php">Photos</a></li>
   </ul>
</div> 

Hi all,

I was wondering if someone could help me, or point me in the right direction.

I am working on a site where I want to use a list based menu for the navigation structure. The first level is vertical on the left hand side of the page, the second level horizontal, and third level drops down vertically underneath.

The main content currently is in an Iframe taking up most of the page.

The system displays properly in Netscape, and still has a few problems in IE.

However my main problem is this. When the menu crosses the IFrame it displays, but then when the mouse moves over the menu/iframe, the Iframe takes the focus and the menu disappears. Setting the Z-index has no effect.

Is there a way to fix this, or an alternative to the IFrame?

Thanks
Wedgetail

On this page:
http://www.prioritypie.f2s.com/tremaer/_location/location.htm

I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this?

And why doesn't the background for the containing div show up in FF when it does in IE?

I had hoped a glass of red wine would help....