2 replies [Last post]
petrustone
Offline
newbie
Ottawa, On
Last seen: 9 years 2 weeks ago
Ottawa, On
Timezone: GMT-4
Joined: 2009-07-31
Posts: 2
Points: 0

Hello,

Please, help! Any idea would be appreciated. Smile
I am trying to create a flyout menu and it looks like IE make the menu transparent.
This only happens in IE. The menu is in the left div and should appear over the content's div which it does. The only problem is that the menu becomes transparent in IE 7 and is hard to read. (Haven't tested in other versions of IE).
Firefox, Opera, Safari 4 and Chrome show the menu like I want to, (not transparent).
The page is at: http://www.head-massage.net/head-massage/test.html if you want to take a look at it.

This is the css code:

/* commented backslash hides from ie5mac \*/ 
 
html{
	height:100%;
	margin:0;
	padding:0
} /* end hack */ 
 
html,body {
	padding:0;
	margin:0;
/*	background-color: #333333; */
	font-size: 11px;
	font-family: "Trebuchet MS", verdana, sans-serif;
}
 
body {	
	text-align:left;
	min-width:990px;/* for mozilla*/
/*	background-color: #333333; */
	height:100%;
/*	background:  url(images/bg_4x818.jpg) repeat-x left top; */
}
 
#wrapper {
	background:  url(images/foot_4x82.jpg) repeat-x left bottom;
}
 
#outer{
	height:99.9%;
	min-height:100%;
	width:990px;
	text-align:left;
	margin:auto;
	position:relative;
	overflow:visible;
/*	background:  url(images/inner_776x1.jpg) repeat-y left top; */
}
 
/* mac hide \*/
* html #outer {
	width:990px
}
/* end hide*/
html>body #outer{
	height:auto;
} /*for mozilla as IE treats height as min-height anyway*/
 
#inner{
	width:100%;
	padding-top:143px;/*needed to make room for header*/
} 
 
#header{
	position:absolute;
	top:0px;
	/*	left:-116px; */
/*	width:892px; */
	width:990px;
	height:93px;
	z-index:74;
	background-image: url(images/top-header_990x93_3.png);
	background-repeat: no-repeat;
	background-position: left top;
}
 
#ajaxmenu {
	position:absolute;
	top:94px;
	left:104px;
	width:778px; 
	height:43px;
	z-index:65;
/*	background:  url(images/header_990x43.jpg) no-repeat left top; */
}
 
#logo {
	position:absolute;
	top:26px;
	left:10px;
	width:237px;
	height:63px;
	text-indent: -5000px;
	z-index:300;
	background:  url(images/logo_237x63.gif) no-repeat left top;
}
 
/* mac hide \*/
* html #outer, * html #header {width:990px}
/* end hide*/
 
#footer {
	color: #ffffff;
	width:990px;
	clear:both;
	height:82px;
	text-align:left;
	left:0px;
	bottom:0px;
	position: absolute;
	background:  url(images/foot_776x82_2.jpg) no-repeat left top;
}
 
#footer p {
	margin-top: 10px;
}
 
#footer p a {
	text-decoration: none;
	color: #ffffff;
}
 
* html #footer{
	margin-bottom:-1px
}/* ie rounding bug*/
 
/* mac hide \*/
* html #footer {
	/*only ie gets this style*/
	height:82px;
	/* for ie*/
}/* end hide*/
 
div,p  {
	margin-top:0px;
}/*clear top margin for mozilla*/
 
#right {
	width:206px;
	float:right;
	z-index: 55;
}
 
#right-inner {
	width: 178px;
	padding-left: 9px;
	text-align: left;
}
 
#right-inner h2 {
	font-size: 15px;
}
 
#left {
	position:relative;
	/*ie needs this to show float */
	width:595px;
	float:right;
	padding-left: 7px;
	z-index: 54;
}
 
#left-inner {
	padding-left: 9px;
	padding-right: 9px;
	text-align: left;
}
 
#clearfooter {
	width:100%;
	height:82px;
	clear:both;
} /* to clear footer */
 
 
html>body #minHeight{
	float:left;
	width:0px;
	height:100%;
	margin-bottom:-82px;
 
} /*safari wrapper */
#content {
	z-index: 300;
	padding-bottom: 7px;
}
 
#content h2 {
	font-size: 15px;
	color: #618200;
	background:  url(images/bullet_17x21.gif) no-repeat left top;
	padding-left: 19px;
	line-height: 24px;
	position: relative;
	z-index: 999;
	width: 50%;
}
 
h3#post-  {
	font-size: 12px;
	color: #618200;
	background:  url() no-repeat left top;
	padding-left: 0px;
}
 
#content p {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
	z-index: 2;
	overflow: hidden;
	visibility: inherit;
}
 
#content p a {
	color: #618200;
}
 
#content p a:hover {
	background-color: #618200;
	color: #ffffff;
}
 
#footer p {
	padding: 8px;
}
 
.FSF_searchResults {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
}
 
.FSF_extract {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
}
 
.FSF_resultLink {
	color: #618200;
}
 
.FSF_extract {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
}
 
.highlight {
	font-size: 12px;
	background-color: #f2f2f2;
	color: #618200;
	font-weight: bold;
	line-height: 18px;
}
 
img {
	border: dotted 1px #444444;
}
 
#content ul li {
	list-style-image: url(images/bullet_11x8.gif);
	margin-bottom: 0.5em;
	font-size: 110%;
}
 
.LIn_shortMode {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
.LIn_desc {
	display: none;
}
 
.LIn_date {
	font-style: italic;
	margin-left: 5px;
}
 
#content a, #sidebar a {
    color: rgb(97, 130, 0);
}
 
#content a:hover, #sidebar a:hover {
    background-color: rgb(97, 130, 0);
    color: rgb(255, 255, 255);
}
 
/* --------------------------------------------------------------------- */
/* ----------------Start of left-menu Navigation - Test---------------------------- */
 
#left-menu {
	z-index:1000;
	width: 175px;
	float:left;
	padding-left: 1px;
	min-height:550px;
	vertical-align: bottom;
 
 
	background-color: #FFF;
	/*	font-size:1em; */
}
/* remove all the bullets, borders and padding from the default list styling */
#left-menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:110px;
	z-index:1001;
	vertical-align: bottom;
	overflow: visible;
	background-color: #fff;
}
/* hack for IE5.5 */
* html #left-menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
#left-menu li {
	position:relative;
	width: 125px;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: outset;
	border-bottom-color: #39F;
	height: 23px;
	overflow: visible;
	vertical-align: bottom;
}
 
#left-menu li a:hover{
background-image: url(images/button-background.jpg);
background-repeat: repeat; 
}
 
 
/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
#left-menu a, #left-menu a:visited {
	font-family: Verdana, Geneva, sans-serif;
	display:block;
	text-decoration:none;
	height:23px;
	line-height:23px;
	width:125px;
	color:#000;
	/*	text-indent:4px; */
	z-index:1002;
	vertical-align: bottom;
	overflow: visible;
 
}
/* hack for IE5.5 */
* html #left-menu a, * html #left-menu a:visited {width:115px; w\idth:114px;}
/* style the link hover */
#left-menu a:hover{
	color:#000;
	font-family: Verdana, Geneva, sans-serif;
	z-index:1003;
	overflow: visible;
	visibility: visible;/* background:#949e7c; */
	height: 23px;
	vertical-align: bottom;
	width:125px;
	font-style: italic;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#left-menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:118px;
	vertical-align: bottom;
	background-color: #fff;
	width: 125px; 
}
/* make the second level visible when hover on first level list OR link */
#left-menu ul :hover ul{
	visibility:visible;
	z-index:1002;
	overflow: visible;
	vertical-align: bottom;
/* background-image: url(images/button-background.jpg);
background-repeat: repeat; */
	width:125px;
 
}
/* keep the third level hidden when you hover on first level list OR link */
#left-menu ul :hover ul ul{
visibility:hidden;
z-index:1004;
overflow: visible;
vertical-align: bottom;
/* background-image: url(images/button-background.png);
background-repeat: repeat; */
width:125px;
}
/* keep the fourth level hidden when you hover on second level list OR link */
#left-menu ul :hover ul :hover ul ul{
visibility:hidden;
vertical-align: bottom;
/* background-image: url(images/button-background.png);
background-repeat: repeat; */
}
/* make the third level visible when you hover over second level list OR link */
#left-menu ul :hover ul :hover ul{ 
visibility:visible;
vertical-align: bottom;
}
/* make the fourth level visible when you hover over third level list OR link */
#left-menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
vertical-align: bottom;
}
 
#left-menu h1 {
	color: #fff;
	font-family: Garamond, Verdana, sans-serif;
	font-size: 1.7em;
	background-color: #ff6600;
	/* border: 1px solid #FF9A00; */
	text-align: left;
	overflow: hidden;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 7px;
	padding-bottom: 0px;
	padding-left: 7px;
	width: 70%;
	margin-bottom: 25px;
}

And this is the link part of the HTML code:

<div id="left-menu">
<h1>Head Massage</h1>
 
<p> <ul><li class="active"><a href="http://head-massage.net/head-massage/test.html" title="Home" >Home</a></li>
<li><a href="/head-massage/test.html" title="Blog" >Blog</a></li>
<li><a  href="/head-massage/test.html" title="MODx Features">Features</a>
<table><tr><td>
 
<ul><li><a href="/head-massage/test.html" title="Ajax" >Ajax</a></li>
<li><a href="/head-massage/test.html" title="Menus and Lists" >Menus and Lists</a></li>
<li><a href="/head-massage/test.html" title="Content Management" >Manage Content</a></li>
<li class="last"><a href="/head-massage/test.html" title="Extendable by design" >Extendability</a></li>
</ul>
 
</td></tr></table>
</a>
</li>
<li><a href="/head-massage/test.html" title="Getting Help" >Getting Help</a></li>
<li><a  href="/head-massage/test.html" title="Template Examples">Templates</a>
<table><tr><td>
 
<ul><li><a href="index.php?id=39" title="MODxHost" >MODxHost</a></li>
<li><a href="/head-massage/test.html" title="MODxCSS Wide" >MODxCSS Wide</a></li>
<li class="last"><a href="/test.html" title="MODxCSS" >MODxCSS</a></li>
</ul>
 
</td></tr></table>
</a>
 
</li>
<li><a href="/head-massage/head-massage-design.html" title="Design" >Design</a></li>
<li class="last"><a href="/head-massage/head-massage-contact-us.html" title="Contact Us" >Contact us</a></li>
</ul></p>
 
      </div>  

Thanks for taking the time to give me a hand!

Dorian

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:should appear over the

Quote:

should appear over the content's div which it does

Which it doesn't!

The background is there it hasn't become transparent. The fly out ul is actually beneath the left content IE is getting the stacking order wrong. Add position:relative to #left-menu to compliment the z-index you have set and all should be well.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

petrustone
Offline
newbie
Ottawa, On
Last seen: 9 years 2 weeks ago
Ottawa, On
Timezone: GMT-4
Joined: 2009-07-31
Posts: 2
Points: 0

Thanks Hugo, That solved

Thanks Hugo,

That solved it.
You saved my night sleep.

:thumbsup: