Hi Robert

The issue that you describe shouldn't have anything to do with Umbraco as the platform. Could you try posting some of the CSS-code that doesn't take effect in IE6?

And have you checked that the IE6.css-file is the one being used in IE6? You probably already have done this, but just to be perfectly sure could you check the sourcecode again?

/Kim A

Hi Robert

Make sure that you use an absolute path to reference your CSS file (and all files). And please make sure it's not just a typo somewhere in the CSS.

As Kim is saying this has nothing to do with Umbraco at all.

/Jan

The menu is on this page (not sure if the public can see this site) - http://beta.testamericainc.com/services/specialty-services/source-air-testing.aspx

When I modify the styles in the ie7 CSS file, the changes take affect and work fine and the paths are the same for both CSS files. The master template references the files the same and there isn't a typo that I found.

Here is the CSS-code in the ie6_style.css file:

 /* Fly Out Menu */
.menu2{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 width:325px;
 height:160px;
 position:absolute;
 font-size:42px;
 margin:0 0;
}
.menu2 ul {
 padding:0;
 margin:0 0 0 -10px;
 list-style:inherit;
 list-style-type: none;
 background:#eee;
 width:325px;
 height:160px;
 border:1px solid #2356B6;
}
.menu2 ul li ul {
 visibility:hidden;
 position:absolute;
 height:0;
 overflow:hidden;
 top:0;
 left:200px;
}
.menu2 ul li {
 float:left;
}
.menu2 ul li a, .menu2 ul li a:visited {
 display:block;
 float:left;
 text-decoration:none;
 color:#000;
 width:190px;
 height:auto;
 line-height:25px;
 font-size:12px;
 background:transparent;
 padding-left:10px;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {
 width:100px;
 w\idth:90px;
}

.menu2 table {
 border-collapse:collapse;
 border:0;
 margin:0;
 padding:0px;
 font-size:1em;
 position:absolute;
 left:0;
 top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */

.menu2 ul li:hover a,
.menu2 ul li a:hover{
 background:#2356B6;
 color:#fff;
}

.menu2 ul li:hover {position:relative; z-index:100;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
 visibility:visible;
 position:absolute;
 height:auto;
 border:1px solid #2356B6;
 background:#7a7a7a;
 padding: 0 15px 0 0;
 overflow:visible;
 width:250px;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
 display:block;
 background:transparent;
 color:#fff;
 line-height:15px;
 padding:5px 0 5px 10px;
 height:auto;
 text-decoration:underline;
 width:250px;
}

.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
 background:#2356B6;
 color:#fff;
 width:250px;
}
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
 visibility:hidden;
 position:absolute;
 height:0;
 overflow:hidden;
 top:0;
 left:105px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
 visibility:visible;
 position:absolute;
 height:auto;
 color:#000;
 padding:0;
 border:1px solid #2356B6;
 list-style-type:none;
 background:#7a7a7a;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
 display:block;
 background:transparent;
 color:#fff;
}

.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
 background:#2356B6;
 color:#fff;
}

 /* end Fly Out menu */

Hi Robert - I just set this up locally, pointing all file paths to your server except the IE6 stylesheet which I copied locally.  I changed the body background colour to #f00 in the IE6 stylesheet here and tested in IE6 and it worked fine.  It appears that whatever styles aren't working must be being overwritten by either inline styles or styles set by your javascript.

By the way, check out IETester - it's an excellent, hassle-free way of testing multiple versions of IE without relying on remote services or VMs.

Dan,

Thanks, I'll check out the IETester. There aren't any inline styles in the page template or master template. The way the site was set up prior to me starting at this position is there's a global file, IE6, 7 & 8 CSS files. I have the menu styles in the global file, IE7 and IE6 file. Should I NOT put the menu styles in the global file and ONLY put it in the individual browser files?

Thanks,

Dan,

Also I originally configured and styled the menu in Dreamweaver. I tested it in the different browsers and it worked fine. It didn't look great but it worked. Once I copied the CSS to the files inside Umbraco, used a macro and xsl file to populate the menu it stopped working correctly.

is working on a reply...