http://www.mysamplesite.info/moneyti...ellaneous/home

On the site above, I'm having a small issue with the shadow on the page. I can't figure out how to layer it correctly in IE. Looking at the page in FF2 it looks exactly as I would like it. You will notice along the left side of the header and content that there is a shadow PNG that spans down the edge. This shadow overlays the menu.

It doesn't seem to matter what I do, I cannot send the image to the front in IE. I think it has to do with the absolute positioning that I have used and taking it out of the document flow. However, I really don't know.

Can anyone take a quick peak and let me know where they think the error is?

I couldn't include the HTML without spamming my url so if you can view the source at the link above, I would appreciate it. (I know that the tables are not good, but I can't get rid of them completely because it is a Joomla site).

CSS:

@charset "utf-8";
/* CSS Document */
/****************************************************************
Colors:
   #007468 Green
   #484848 Dark Grey Background
   #848484 Lighter Grey Tabs
   #ff6f00 Orange background
   #00109c Blue
 
/****************************************************************/

body {
   background: url(../images/pattern-grey.gif) repeat;
   font-size: 85%;
   font-family: "Myriad Pro", Verdana, "Bitstream Vera Sans";
   color: #484848;
   padding: 0;
   margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
   margin: 0 0 1em 0;
   padding: 0;
}

h1, .contentheading { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3, .contentpagetitle-blogstyle { font-size: 1.2em; font-weight: bold; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.9em; }

a:link, a:active {
   color: #007468;
   text-decoration: underline;
}

a:visited, a:hover {
   color: #ff6f00;
   text-decoration: underline;
}
#container {
   width: 980px;
   background: transparent;
   float: right;
}


/**********************************************************************/
/**********   mainbody   **********************************************/
/**********************************************************************/
#mainbody {
   position: relative;
   width: 780px;
   float: right;
}

#header {
   width: 100%;
   height: 150px;
}

#header img.logo {
   float: left;
   margin: 10px 0 0 0;
}

#header h1.tollfree {
   width: 350px;
   height: 118px;
   float: right;
   background: transparent url(../images/tollfree.png) right no-repeat;
   margin: 10px 0;
}

#header h1.tollfree span{
   display:none;
}

#top-bar {
   background: #009C8C;
   width: 100%;
   height: 15px;
}

#sub-header {
   position: relative;
   clear: both;
   width: 100%;
   height: 235px;
   margin-bottom: 10px;
   background: white url(../images/house-chalet.jpg) left no-repeat;
   z-index: 10;
}

#sub-header div.shadow {
   position: absolute;
   left: -6px;
   width: 6px;
   height: 100%;
   background: transparent url(../images/shadow-left.png) left repeat-y;
}   

#sub-header div.logo {
   position: relative;
   height: 235px;
   width: 229px;
   float: right;
   background: #ff6f00 url(../images/bg-orange.gif) left repeat-x;
   border-left: thin solid white;
}

#sub-header div.logo img {
   position: absolute;
   left: 15px;
   top: 22px;
}

/*****************************************************************************/
/***************   CONTENT   *************************************************/
/*****************************************************************************/

#content {
   position: relative;
   width: 100%;
   background-color: white;
   z-index: 10;
}

#content div.shadow {
   position: absolute;
   left: -6px;
   width: 6px;
   height: 100%;
   background: transparent url(../images/shadow-left.png) left repeat-y;
   z-index: 10;
}   

#textarea {
   width: 521px;
   margin: 0px 15px;
   padding: 15px 0;
   float: left;
}

#content h1 {
}

#content h1 span, #content .contentheading span {
   color: #007468;
}

/*****************************************************************************/
/***************   SIDEBAR   *************************************************/
/*****************************************************************************/

#sidebar {
   width: 209px;
   float: right;
   padding: 15px 0;
   margin-right: 0px;
}

#sidebar h1, #sidebar h3 {
   background: transparent url(../images/bg-sidebar-heading.png) repeat-y left;
   padding-left: 10px;
   color: black;
}

#sidebar .moduletable-livechat {
   margin-bottom: 1.5em;
}

ul#magpierss {
   list-style: none inside none;
   margin: 0px auto;
   padding: 0px;
   width: 90%;
}

ul#magpierss li {
   margin: 5px 0 5px 0;
   border-bottom: 1px dotted #848484;
}

ul#magpierss li a:link, ul#magpierss li a:active {
   text-decoration: none;
   font-weight: bold;
}

ul#magpierss li a:hover, ul#magpierss li a:visited {
   text-decoration: underline;
}

/*****************************************************************************/
/***************   FOOTER    *************************************************/
/*****************************************************************************/
#footer {
   width: 100%;
   clear: both;
   color: white;
   margin: 10px 0 0 0;
}

#footer p {
   width: 450px;
   float: left;
   margin: 0 0 10px 0;
}

#footer p span {
   font-family: Verdana, Helvetica, sans-serif;
   font-size: .8em;
}

#bottom-bar {
   clear: both;
   background: #009C8C;
   width: 100%;
}

#bottom-bar ul {
   width: 765px;
   padding: 0;
   margin: 0 0 0 15px;
   list-style: none inside none;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: .9em;
}

#bottom-bar ul li {
   float: left;
   width: 18%;
}

#bottom-bar ul li a:link, #bottom-bar ul li a:visited, #bottom-bar ul li a:active {
   color: #eeeeee;
   text-decoration: none;
}

#bottom-bar ul li a:hover {
   text-decoration: underline;
}

/**********************************************************************/
/****     menu-left    ************************************************/
/**********************************************************************/
#menu-container {
   float: left;
   width: 200px;
   z-index: 5;
}

#mainlevel-menu-left {
   width: 200px;
   padding: 0;
   margin: 153px 0 0 0;
   list-style: none inside none;
}

#mainlevel-menu-left li {
   position: relative;
   background: #848484;
   margin-left: 10px;
   margin-bottom: .2em;
   height: 53px;
   border-top: 1px solid #bdbdbd;
   border-bottom: 1px solid #484848;
   border-left: 1px solid transparent;
}

#mainlevel-menu-left li img {
   position: absolute;
   left: -5px;
   top: -1px;
}

#mainlevel-menu-left li a:link, #mainlevel-menu-left li a:visited {
   display: block;
   width: 90%;
   height: 38px;
   color: white;
   font-family: "Myriad Pro SemiCond", "Myriad Pro", Verdana, "Bitstream Vera Sans";
   font-size: 19px;
   text-decoration: none;
   padding-left: 10%;
   padding-top: 15px;
}

#mainlevel-menu-left li a:hover {
   color: black;
}

#mainlevel-menu-left li ul {
   display: none;
   position: absolute;
   right: -195px;
   top: -2px;
   width: 200px;
   border: 1px solid black;
   list-style: none inside none;
   margin: 0;
   padding: 0;
   z-index: 20;
}

#mainlevel-menu-left li:hover ul {
   display: inline;
}

#mainlevel-menu-left li ul li {
   padding: 0;
   margin: 0;
}
/**********************************************************************/
/****     menu-left-bottom    *****************************************/
/**********************************************************************/
#mainlevel-menu-left-bottom {
   clear: left;
   float: right;
   width: 200px;
   padding: 0;
   margin: 30px 0 0 0;
   list-style: none inside none;
}

#mainlevel-menu-left-bottom li {
   position: relative;
   background: #848484;
   margin-left: 10px;
   margin-bottom: .2em;
   height: 32px;
   border-top: 1px solid #bdbdbd;
   border-bottom: 1px solid #484848;
   border-left: 1px solid transparent;
}

#mainlevel-menu-left-bottom li img {
   position: absolute;
   left: -5px;
   top: -1px;
}

#mainlevel-menu-left-bottom li a:link, #mainlevel-menu-left-bottom li a:visited {
   display: block;
   width: 90%;
   height: 25px;
   color: white;
   font-family: Verdana, "Bitstream Vera Sans";
   font-size: .85em;
   text-decoration: none;
   padding-left: 5%;
   padding-top: 7px;
}

#mainlevel-menu-left-bottom li a:hover {
   color: black;
}

/*****************************************************************************/
/***************   CLASSES   *************************************************/
/*****************************************************************************/

.clr-both { clear: both; }

This isn't going to work:

#menu-container {
float: left;
width: 200px;
z-index: 5;
}

Z-index ONLY works on positioned elements.

Forgive me if this is dense, but where is the image that you're using for the shadow ?

If you ask me, you're doing this the hard way.

1. is floating an element on considered positioning it? if not, do you recommend that I do it differently or take out the z-index all together there?

2. The image is in my images folder for my template. It works exactly the way i want in FF. I just can't get it right in IE.

3. I'm a little limited in the way I can design it as I have to make sure that it works with Joomla. If there is an easier way, how would you recommend that I do it?

1 - No, floating is not positioning. Positioning is absolute, relative or fixed. The z-index as you have it there is useless, totally ignored.

2 - what I meant was, where is it in your code, I couldn't find it

3 - I understand you're dealing with Joomla, but why not just make the ENTIRE button, including the shadow, as a single background image for the nav <li> or <a> element ? It would be a whole lot easier than messing with that little blue stripe as a single image, then the shadow as a single image.

Thanks for the tip on the z-index... I'll take it out.

I didn't want to do the whole button as one image because I was trying to keep the page size as small as possible.

Here is the HTML for the menus:

<div class="moduletable-menu-left">
<ul id="mainlevel-menu-left"  >
<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/> <a href="/main/miscellaneous/home">Home</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/> <a href="/mortgages/residential">Mortgages</a><ul id="mainlevel-menu-left" class="submenu" ><li>  <a href="/content/blogcategory/13/94/">Residential</a> </li>
<li>  <a href="/residential-mortgages/lenders-list/">Lending Partners</a> </li>
</ul> </li>
<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/> <a href="/mortgage/tools/mortgage-calculators">Calculators</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/> <a href="/contactus">Contact Us</a> </li>
</ul>		</div>

<div class="moduletable-menu-left-bottom">
<ul id="mainlevel-menu-left-bottom"  >
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/purchasing-a-home">Purchasing a Home</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/mortgage-pre-approvals">Mortgage Pre-approvals</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/self-employed-mortgages">Self Employed Mortgages</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/cash-back-mortgages">Cash Back Mortgages</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/no-money-down-mortgage">Zero Down</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/debt-consolidation">Debt Consolidation</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/second-mortgages">Second Mortgages</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/home-equity-loan">Home Equity Loans</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/home-equity-line-of-credit">Lines of Credit</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-orange-small.png" alt=""/> <a href="/mortgages/residential/mortgage-refinance">Refinance</a> </li>
</ul>		</div>

I was trying to keep the page size as small as possible.

Ok, but something as simple as that button could be a pretty small graphic and once the blue and orange striped versions are loaded once, they are not called again, so the load time shouldn't be big at all.

<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/> <a href="/main/miscellaneous/home">Home</a> </li>
<li> <img src="/templates/fresh/images/menu-tab-blue.png" alt=""/>

Ok, but that doesn't show me the shadow

You have this for your shadow:

#sub-header div.shadow {
position: absolute;
left: -6px;
width: 6px;
height: 100%;
background: transparent url(../images/shadow-left.png) left repeat-y;
}

The position:absolute is ok I guess, but w/o a z-index, it's not going to come above anything else - give it a high z-index. IE does some funky things with absolute positioning, which is why I avoid it as much as possible.

Your not losing your mind and you are not blind. I have the image for the shadow contained within the CSS sheet as a background to the #sub-header. I then repeat the shadow, for the length of the header.

** I forgot, that is another reason why I did it this way... If I change the measurements of the page later, I don't have to re-do the images, and this way they are a little more fluid.

#sub-header {
   position: relative;
   clear: both;
   width: 100%;
   height: 235px;
   margin-bottom: 10px;
   background: white url(../images/house-chalet.jpg) left no-repeat;
   z-index: 10;
}

#sub-header div.shadow {
   position: absolute;
   left: -6px;
   width: 6px;
   height: 100%;
   background: transparent url(../images/shadow-left.png) left repeat-y;
}   

#sub-header div.logo {
   position: relative;
   height: 235px;
   width: 229px;
   float: right;
   background: #ff6f00 url(../images/bg-orange.gif) left repeat-x;
   border-left: thin solid white;
}

#sub-header div.logo img {
   position: absolute;
   left: 15px;
   top: 22px;
}

Ok, I finally found it .. sorry.
I tried changing the z-indexes and it doesn't seem to matter, so I have to believe it's IE's old positioning nonsense that's getting in the way.

On the other hand, the height: 100% on the shadow doesn't work, so even if the z-index did work, the height would still only be the height of the png itself. Is that a transparent PNG ? If so, IE6 doesn't support transparent pngs and absolutely will not do repeating transparent pngs.

The shadow is a transparent PNG and I was planning on using an iePNG fix of some kind to get it to support that transparency.

I didn't know that it wouldn't repeat PNG's at all.

I've put positioning on the menu-left where you said it didn't work, and it seems to make an effect now. However, if I set the z-index to be "below" that of the sub-header then the sub-menus that pop-out (not yet active in IE -- csshover.htc) are under the header, not above it. Even if I set the z-index to above that of the submenu. I'm assuming this behaviour is because the sub-menu is actually an element inside the main menu.

Frustrating! Does anyone have any other suggestions in which I can accomplish the same look? Or, should I just drop this look for the menu all together?

You could do if if you use a single image for the buttons as I suggested. Then the shadow wouldn't be part of the header at all.

The problem is that the shadow goes to the length of the page. It is separated for the header and then the page.

The buttons, have a margin inbetween them of .2em.

So if I put the shadow on the button, it will be broken up.

Okay LadynRed:

I have done as you suggested but now I've got a new problem -- and I don't even know if this is going to fix my old problem! For some reason now the LI elements are getting *Pushed* over to the right as if there is a margin-left set (in IE only). However, there is no margin set.

Do you know why this is doing this?

HTML:

<div id="mainmenu-container">
	 <div class="moduletable-mainmenu">
	 	  <ul  id="mainlevel-mainmenu"><li><a href="http://www.mysamplesite.info/mydomain.ca/main/miscellaneous/home" class="mainlevel-mainmenu" id="active_menu-mainmenu">Home</a></li>
		  	   <li><a href="http://www.mysamplesite.info/mydomain.ca/mortgages/residential" class="mainlevel-mainmenu">Mortgages</a>
			   <ul >
			   	   <li><a href="http://www.mysamplesite.info/mydomain.ca/mortgages/residential/" class="sublevel-mainmenu">Residential</a></li>
			   	   <li><a href="http://www.mysamplesite.info/mydomain.ca/residential-mortgages/lenders-list/" class="sublevel-mainmenu">Lending Partners</a>
				       <ul >
					   	   <li><a href="http://www.mysamplesite.info/mydomain.ca/residential-mortgages/lenders-list/agf-trust" class="sublevel-mainmenu">AGF Trust</a></li>
			   	       	   <li><a href="http://www.mysamplesite.info/mydomain.ca/residential-mortgages/lenders-list/xceed-mortgage-corporation" class="sublevel-mainmenu">Xceed Mortgages</a></li>
			   			</ul>
			   		</li>
					<li><a href="http://www.mysamplesite.info/mydomain.ca/component/option,com_facileforms/Itemid,100/" class="sublevel-mainmenu">Apply Now</a></li>
				</ul>
				</li>
				<li><a href="http://www.mysamplesite.info/mydomain.ca/mortgage/tools/mortgage-calculators" class="mainlevel-mainmenu">Calculators</a></li>
				<li><a href="http://www.mysamplesite.info/mydomain.ca/contactus" class="mainlevel-mainmenu">Contact Us</a></li>
			</ul>		
	</div>
</div>  <!-- #menu-container -->

CSS:

/*****************************************************************************/
/***************   MENU-LEFT   ***********************************************/
/*****************************************************************************/
#mainmenu-container {
   position: absolute;
   width: 200px;
   top: 165px;
}

ul#mainlevel-mainmenu {
   position: relative;
   width: 100%;
   height: 235px;
   margin: 0;
   padding: 0;
   list-style: none inside none;
background: blue;
}

ul#mainlevel-mainmenu li {
   margin: 0 0 .2em 0;
   padding: 0;
   background: transparent url(../images/mainmenu-tab.png) right no-repeat;
   width: 100%;
   height: 54px;
}

ul#mainlevel-mainmenu li img {
   display: none;
}

ul#mainlevel-mainmenu ul {
   display: none;
}

Is all the changed code on your site ? I really need to see the whole thing.

What version of IE are you seeing this in ?

IE 6 & IE7 - Yes it is on the site right now.

I haven't got it fully formatted the way I want it but the image is there as the button and in IE6/IE7 it is *pushing* over to the right.

Yay!! Almost there.

I took your advice and added the shadow to the actual image of the tab instead of overlaying the shadow to the list.

IE & FF are behaving the same way now.

ONE PROBLEM:
There are 4 main tabs to the menu. The tab "Mortgages" drops down (out). But when it does, it goes under the next two tabs.

Can anyone PLEASE tell me how to have it on-top?

/*****************************************************************************/
/***************   MENU-LEFT   ***********************************************/
/*****************************************************************************/

#mainmenu-container {
   width: 200px;
   height: 235px;
   margin-top: 150px;
   float: left;
}

#mainmenu-container a {
   display: block;
   font-family: "Myriad Pro SemiCond", "Myriad Pro", Verdana, "Bitstream Vera Sans";
   font-size: 19px;
   padding: 0;
   margin: 0;
   width: 90%;
   height: 40px;
   padding-top: 14px;
   padding-left: 10%;
   color: white;
   text-decoration: none;
   text-align: left;
}

#mainmenu-container a:hover {
   color: black;
}

ul#mainlevel-mainmenu {
   width: 100%;
   height: 235px;
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: inside;
   list-style-image: none;
}

ul#mainlevel-mainmenu li {
   position: relative;
   margin: 0 0 .2em 0;
   padding: 0;
   background: transparent url(../images/mainmenu-tab.png) right no-repeat;
   width: 100%;
}

ul#mainlevel-mainmenu ul {
   display: none;
   position: absolute;
   left: 194px;
   top: -2px;
   width: 200px;
   border: 1px solid black;
   list-style: none inside none;
   margin: 0;
   padding: 0;
}

ul#mainlevel-mainmenu li:hover ul {
   display: inline;
}

ul#mainlevel-mainmenu li ul li {
   position: relative;
   margin: 0;
   padding: 0;
   background: #848484;
   border-top: 1px solid #bdbdbd;
   border-bottom: 1px solid #484848;
   width: 100%;
}

ul#mainlevel-mainmenu li:hover ul ul {
   display: none;
}

I'll have to look at it using my laptop, which has IE7 on it. In IE6, your hovers aren't working at all, so you need the hover behavior script to make that work.

okay... I think I have it all working (except for some weird behaviour on the menu).

* The images should all be properly transparent now in IE6
* The hovers on the menu should work in IE6
* The menu alignment should be fixed in IE7 & IE6

Can you verify for me please?

Also... The *weird* behaviour is that when you hover over Home and very slowly pull the mouse down to hover over "Mortgages". At first it is fine, but once you pull the cursor to go slightly below the word "Mortgages", it seems to double the bottom padding for that LI tag only. Do you have any idea why that may be?