Menu/IE6 - Borders Disappearing

Feb 11, 2008 at 5:02 PM
I've implemented b9278 on an ASP.NET 3.5 site, so I expected a few glitches; however, things have worked brilliantly.

So far, rendering in FireFox2, Safari 3.0.4, IE7, and Opera9 look great--but IE 6 has caused me a few issues.

When rendering, my asp:Menu "loses" the top and left borders around my menu items; however, no sort of indexing, position, or other such tags seems to "fix" it. If I drill down using Developer Toolbar, I see that the IEMenu6.css is being applied.

Any ideas would be greatly appreciated. :)

Here's an example of the issue: http://photos.tiredstudent.com/WebStorageHandler.ashx?tb=false&id=235
Here's the actual production web site: http://photos.tiredstudent.com/

The .css File:

.MainMenu ul.AspNet-Menu /* Tier 1 */
{
font-size: 0.8em;
width: 32em;
position: static; /* IE6 fix?? Doesn't seem to be =( */
}

.MainMenu ul.AspNet-Menu ul /* Tier 2 */
{
width: 9em;
left: 0.5em;
border: solid 5px #284e98;
z-index: 300;
}

.MainMenu ul.AspNet-Menu ul ul /* Tier 3+ */
{
top: -0.5em;
left: 6em;
}

.MainMenu li /* all list items */
{
width: 9em;
background-color: #0066cc;
}

.MainMenu li:hover, /* list items being hovered over */
.MainMenu li.AspNet-Menu-Hover
{
color:White;
background-color: #284E98;
}

.MainMenu a, /* all anchors and spans (nodes with no link) */
.MainMenu span
{
color: White;
background-color: #0066cc;
padding: 4px 2px 4px 8px;
background: transparent url(arrowRight.gif) right center no-repeat;
}

.MainMenu li.AspNet-Menu-Leaf a, /* leaves */
.MainMenu li.AspNet-Menu-Leaf span
{
background-image: none !important;
}

.MainMenu li:hover a, /* hovered text */
.MainMenu li:hover span,
.MainMenu li.AspNet-Menu-Hover a,
.MainMenu li.AspNet-Menu-Hover span,
.MainMenu li:hover li:hover a,
.MainMenu li:hover li:hover span,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.MainMenu li:hover li:hover li:hover a,
.MainMenu li:hover li:hover li:hover span,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
color: White;
background: transparent url(arrowRight.gif) right center no-repeat;
}

.MainMenu li:hover li a, /* the tier above this one is hovered */
.MainMenu li:hover li span,
.MainMenu li.AspNet-Menu-Hover li a,
.MainMenu li.AspNet-Menu-Hover li span,
.MainMenu li:hover li:hover li a,
.MainMenu li:hover li:hover li span,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.MainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
color: White;
background: transparent url(arrowRight.gif) right center no-repeat;
}

.MainMenu .AspNet-Menu-Selected /* this tier is selected */
{
border: solid 1px #284E98 !important;
}

.MainMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
{
border: solid 1px #284E98 !important;
}

.MainMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
{
border: solid 1px #284E98 !important;
}
Feb 11, 2008 at 6:34 PM
Edited Feb 13, 2008 at 5:03 PM
My mistake, apparently the IEMenu6 is loaded no matter IE6 or not. Here's a Fiddler from IE7 where it went ahead and pulled it out of my cache. I cleared the cache, reloaded, and it pulled it down fresh.

http://photos.tiredstudent.com/WebStorageHandler.ashx?tb=false&id=236

Unfortunately, that just shows that IE7 is downloading the IE6 CSS and IE6 still isn't rendering correctly. :(

edit: Clarification.
Coordinator
Feb 15, 2008 at 2:11 AM
I just tested the latest build against FF2, IE7, and IE6, and the IEMenu6.css file was only pulled down when loading the page with IE6.

If you can, debug the page loads, and see what happens at line 61 in MenuAdapter.cs (the code that adds the IE6 CSS file):

if (this.Browser.Browser.ToUpper().IndexOf("IE") >= 0
&& this.Browser.MajorVersion < 7)
{
Helpers.RegisterEmbeddedCSS("CSSFriendly.CSS.BrowserSpecific.IEMenu6.css", type, this.Page);
}
Feb 19, 2008 at 4:07 PM
@bdemarzo-

I debugged that line out and you're correct; it's working as intended. I ran my project again and it's working too. I'm baffled why that IE6Menu.css was caching--it's not now. I tried it against a system with IE 6 on it and it downloaded the IE6 menu as intended; however, the error remains (missing the left and top borders).