CSS - Quickjump Menu Border Doesn't Show In Ie

I don't have much experience using CSS, but I flatter myself that I can at least code a sheet which is readable by my HTML pages.

I've uploaded a stylesheet for my page at http://noblecarrots.com/index.php at http://noblecarrots.com/stylesheet.css rather than coding CSS in the HTML itself as I had done previously. The problem is that, during the transition, all of my styling has vanished. See for yourself - my links all check out, my CSS validates, and everything else seems fine, but you're still staring at Times New Roman and whitespace on my homepage.

If this turns out to be down to a typo or something similar, then I apologize in advance. I can only imagine how much of that kind of canooli you get on this forum.

Oh, and in case it makes things easier, here's my CSS. I think you'll agree it's just fine:

Code:

body {
	font-family: Garamond, Georgia, serif;
	background-color: #c9c299;
	color: #41383C;
	width: 30em;
	text-align: justify;
	margin: auto;
	}
img:link {
	border: none;
	}
a:link {
	color: #41383C;
	text-decoration: none;
	font-weight: bold;
	}
a:visited {
	color: #41383C;
	text-decoration: none;
	font-weight: bold;
	}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	}
a:active {
	color: #41383C;
	}
.logo {
	width: 16em;
	float: left;
	margin: auto;
	position: relative; top: 0px;
	}
.about {
	width: 13em;
	font-size: 0.9em;
	float: right;
	margin: auto;
	position: relative; top: 15px;
	text-align: left;
	}
.briefs {
	position: relative;
	text-align: justify;
	line-height: 100%;
	margin: auto;
	}
.quote {
	width: 25em;
	text-align: justify;
	line-height: 100%;
	}
ul {
	width: 22em;
	text-align: justify;
	line-height: 125%;
	}
.star {
	text-align: center;
	line-height: 100%;
	word-spacing: 2em;
	font-size: 2em;
	font-family: "MS Gothic";
	}
.footer {
	width: 40em;
	font-size: 0.9em;
	}
.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
	font-weight: bold;
	}
h2 {
	font-size: 3.75em;
	line-height: 5%;
	}
h3 {
	font-size: 1.25em;
	}

Hi everyone...new here and I hope you can help! Thanks is advance!

I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site:

romanceplaybook
I can't post the entire URL because I'm a new registrant. But just put dot com at the end.

Not that the page background is white. It should be repeating the image bkgd.jpg

Here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

Hey everyone,

I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <title></title>
   <style type="text/css">/* <![CDATA[ */
/* globals */
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #0E1211;
 color: #FFFFFF;
 font-family: tahoma, verdana, arial;
 font-size: 1em;
 background-image: url( background1.gif );
 background-repeat: no-repeat;
}
a img {
 border: 0;
}
a, a:link, a:visited, a:hover, a:visited {
 color: #EC5568;
 text-decoration: none;
}
a:focus {
 outline: none;
}
a:hover {
 text-decoration: none;
}
#container {
 padding: 10px;
}
#menu {
 float: left;
 width: 20%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: center;
}
#menu li {
 display: block;
 line-height: 200%;
 list-style-type: none;
}
#menu a {
 padding: 5px;
 padding-right: 80px;
 padding-left: 80px;
 background-color: #333333;
}
#menu a:hover {
 background-color: #000000;
}
#menu h2 {
 text-align: left;
 padding-left: 15px;
 font-size: 16px;
}
#main {
 margin-left: 1%;
 padding: 1%;
 float: right;
 width: 77%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: justify;
}
	/* ]]> */</style>
  </head>
  <body>
   <div id="container">
    <div id="menu">
     <h2>asdf</h2>
     <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
     </ul>
    </div>
    <div id="main">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor.

Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris. 
    </div>
   </div>
  </body>
 </html>

Screen shot for FF.
Screen shot for IE7.

Any ideas on why this is happening? IE has been going weird when ever I use background images

I've taken out a snippet of the code thats not working and put it into a page here, both validate (sorry I didn't make them links as I'm a new user and it won't allow me to):

ucair.cs.uiuc.edu/pdovyda2/test.html
ucair.cs.uiuc.edu/pdovyda2/test.html

Basically there should be 8px of padding on the table with class 'innerbox', and it works fine in FF but in IE it ignores the padding completely.

I can't seem to figure out what the issue is, it seems like it should work just fine, any ideas?

Thanks!

Hello! I am learning CSS on my own which is an authentic crusade
So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand.
I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me?
Quote:
http:// nicetobehere-btemplates.blogspot.com/

And since the code is too big to post here you can download it from here
Quote:
http:// btemplates.com/2009/01/16/nice-to-be-here/


I will apreciate very much if you can help me with this!!

I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white.

The following is the code I'm using in the body selector.. not much places where something could be going wrong.

css Code:
Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }

  

  


 body {


     margin: 0px;


     padding: 0px;


     background-color: #333333;


 } 

The link to the page is he http://montanlaw.com

I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips?

Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to.

Thanks in advance for any help,
chip19

Long time reader, first time poster.

I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser.

Here's the issue:
The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor?

Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before.

Here's the markup and css...

index.asp
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)"> 
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
	<title>Intranet</title>

	<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
	<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
   <script type="text/javascript" src="/calendar/calendar.js"></script>
	<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
	<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
	<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>

<body>


<div id="topbar">
	<!--#include virtual="/inc/toolbar.asp" -->
</div>

<div id="leftbox">
	<!--#include virtual="/inc/menu.asp" -->
</div>

<div id="rightbox">
	<!--#include virtual="/inc/rightbox.asp" -->	
</div>

<div id="middlebox">
<h1>&nbsp;Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>


</body>
</html>

Here's the menu.asp include...
Code:

		 <ul id="nav">
	      <li><a href='/departments/reports/index.asp'>Reports</a>
	      	<ul>
	          <li><a href=''>EOD<span>End of Day Reports</span></a></li>
	          <li><a href=''>EOM<span>End of Month</span></a></li>
	          <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li>
	          <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li>
	          <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li>
	          <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li>
	          <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li>
	         </ul>
	      </li>		
		  <li>
		  	<a href='/index.asp'>Home</a>
		  </li>
		</ul>

and here's the css

Code:

body {background: #fff;	font-size: 62.5%;	color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #099;
	z-index: 1;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #006;
	background: #ccc;
	padding: 5px;
	border: 1px solid #006;
	border-bottom: 0;
	}

ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/* Begin Tool Tip Span */
		 
span {
display: none;
}
				
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
		  }

/* End Tool Tip Span */

/*******************************************************************************
                       Positioning rules
*******************************************************************************/

div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}

div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}


div#topbar	{
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}


div#search	{
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}

Your help and advice is most welcome and appreciated.
Mark

Please help. The code listed below validates.

It is a 2 level pull out menu using only CSS. It works nicely in FireFox and IE 6, but I don't see the sub-menus in IE 7. Why? Is it related to z-index?

The files are organized: html, non IE css, IE css. I pulled out the IE specific css to make things more clear.
homepage.mac.com/carlamatusow/testmenu/testmenu.html
homepage.mac.com/carlamatusow/testmenu/testmenu.css
homepage.mac.com/carlamatusow/testmenu/testmenuIE.css

Thanks,
Carla

Hi,

**UPDATE: Problem Fixed...change the z-index of the parent menu element, thanks mizzory!***

Thank you for viewing this post and your help is greatly appreciated!

The navagation menu works great in IE8 and Firefox, however in IE7, the drop-down hides behind the content div. I have tried assigning z-index to the divs, but with no luck.

#wrap {
margin:auto;
width:1000px;
background-color: #FFFFFF;
background-repeat: repeat-y;
min-height:100%;
position:relative;

}
html, body {
margin:0;
padding:0;
height:100%;
}
#content {
min-height: 400px;
padding-bottom:50px; /* Height of the footer */
position:relative;

}

#header {
height: 200px;
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
font-size: 14px;
font:Arial, Helvetica, sans-serif, bold;
text-align:center;
color:#FFFFFF;
}


/*horizontal menu specifications*/
#menu {
background: #FFFFFF;
float: left;
height:40px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 142.85px;
float: left;
}

#menu a, #menu h2 {
font: bold 13px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
margin: 0;
padding: 2px;
text-align:center;
}

/* main menu header: set font colour and background colour */
#menu h2 {
color: #FFFFFF;
background: #0066CC;
text-decoration:none;
}


/* main menu dropdown: set font colour, background colour, no underline for hyperlink */
#menu a {
color: #000000;
background: #CCCCCC;
border-color: #000000;
text-decoration: none;
}

/* main menu dropdown mouse hovering: set font colour, background colour*/
#menu a:hover {
color: #E4001B;
background: #FFFFFF;
}



/*position the pop out menu*/
#menu li {
position: relative;
}


#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
display: block;
}

-S

I have a dropdown menu that was generated using .net When I try to apply some .css style tags:

.menuitem {
background-color:#fff;
color:#ffffff;
text-align:left;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 2px 8px 3px 10px;
margin:0px;}

It works BUT, if I add: border-top attribute I get a double border on all the other items in the list but the first.

Is there something I can do? I had thought about trying to create a .css tag for the first item in the list with it's own attributes. Any ideas?

Thanks!
Stephen

I have a CSS menu. How to I remove the RIGHT border for that last link item? I tried a bunch of stuff, I can change the colour of it but I can't seem to get rid of it.

Quote:
/*
------------------------------------
PVII Menu CSS Express Drop-Down Menu
by Project Seven Development
www.projectseven.com
------------------------------------
*/
/*body {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
margin: 24px 0;
padding: 0;
background-image: url(images/p7exp_pbg.jpg);
background-repeat: repeat-x;
}*/
/*
Container for the menu. We set top and bottom borders only because the menu container
stretches the entire window width. Note that this container can go inside a fixed width
element that is centered on the page, if you so desire. It can even go inside a table cell.
It carries a background image for aesthetics.
*/
#menuwrapper {
border-top: 1px solid #000;
border-bottom: 1px solid #333;
background-color: #FFFFFF;
background-image: url(../images/menu_bg.gif);
background-repeat: repeat-x;
}
/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
/*
Root-Level Links. Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
display: block;
text-decoration: none;
border-right: 1px solid #333;
font-size: 1em;
color: #FFFFFF;
padding-top: 5px;
padding-right: 14px;
padding-bottom: 5px;
padding-left: 14px;
}
/*
Class assigned to those Root-Level links that have associated Sub-Menus.
The top and bottom padding assigned this element must be the same as
that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward
pointing arrow.
*/
#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(../images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}
/*
The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in
this style sheet will set the width for this element to auto for all
other browsers - hiding it from IE5 Mac. The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text.
*/
#p7menubar li {
float: left;
width: 9em;
}
/*
Sets width for Sub-Menu box and the List Items inside - in proportional em units.
This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 12em;
}
/*
The sub-menu links. We set color and turn off the right border, which
would otherwise be inherited from the root link rule. We set top and
bottom padding less than the root items and increas the left padding
to indent the sub-menu links a small amount in from the root links.
*/
#p7menubar ul li a {
color: #666666;
border-right: 0;
padding-top: 3px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 16px;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
Positioned Absolutely to allow them to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background Color must be set or problems will be encountered in MSIE.
Right and bottom borders are set to simulate a raised look.
A gradient background image is assigned.
*/
#p7menubar li ul {
position: absolute;
display: none;
background-color: #FFFFFF;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
background-image: url(../images/menu_bg_pulldown.gif);
background-repeat: repeat-x;
}
/*
Changes the Text color and background color when the Root-Level
menu items are moused over. The second selector sets color and background
when Root-Level items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth
selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled.
*/
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #000000;
background-color: #999999;
}
/*
Set the Sub-Menu UL to be visible when its associated
Root-Level link is moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
*/
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
/*
Sets the Text color of the Sub-Level links when the Root-Level
menu items are moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
The color set should march the normal Sub-Level link color
in the rule: #p7menubar ul li a. The background color must be
transparent to allow the underlying gradient background on the UL
to show through.
*/
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color: #000000;
background-color: transparent;
}
/*
The normal hover class for Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white.
*/
#p7menubar ul a:hover {
background-color: #606060!important;
color: #FFFFFF!important;
}
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#p7menubar li {width: auto;}

My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code.

Code:

#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Here is the HTML.

Code:

<div id="menu">

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
      <li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
	  <li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
	  <li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="History">History</a></li>
      <li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
      <li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
		  <ul>
      <li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
      <li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
    </ul>
      <li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
      <li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>  
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
      <li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
    </ul>
</ul>
</div>

Thank you in advance

Hi,
I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items.

onmouseover="document.all.child1.style.display='block'
onmouseout="document.all.child1.style.display='none'

When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not.

Please look at the style sheet - and web page.

Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout??????

Thanks
Vmusic