CSS and asp.net datalist

I really didn’t know where to post this question, and I’m hoping that this is the right place.

I have an e-commerce application written in asp.net. I created a custom “control” that creates a navigation based on the categories. So this control is dynamic.

I’ve laid out the control to render a typical unordered list, which can be made into ANY kind of menu using css.

First, the code.


<asp:DataList id="dlMainCat" runat="server" DataKeyField="uid">
<ItemTemplate>
<ul>
<li><a href=SearchResult.aspx?CategoryID=<%# DataBinder.Eval(Container.DataItem, "uid") %>><%# DataBinder.Eval(Container.DataItem, "Name") %></a>
<ul>
<asp:Repeater id="rptSubCategory" runat="server">
<ItemTemplate>
<li><a href=SearchResult.aspx?CategoryID=<%# DataBinder.Eval(Container.DataItem, "uid") %>><%# DataBinder.Eval(Container.DataItem, "Name") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</ul>
</ItemTemplate>
</asp:DataList>

And this renders a list that looks like this (Only two deep for example purposes)

<tr>
<td>
<ul>
<li><a href=SearchResult.aspx?CategoryID=2>Cabinet Hardware</a>
<ul>
<li><a href=SearchResult.aspx?CategoryID=4>Knobs</a></li>
<li><a href=SearchResult.aspx?CategoryID=5>Pulls and Handles</a></li>
<li><a href=SearchResult.aspx?CategoryID=6>Backplates & Knobs</a></li>
<li><a href=SearchResult.aspx?CategoryID=7>Refrigerator Pulls</a></li>
<li><a href=SearchResult.aspx?CategoryID=8>T-Bars/ Barrel Pulls</a></li>
<li><a href=SearchResult.aspx?CategoryID=121>Drop Pulls</a></li>
</ul>
</ul>
</td>
</tr>

<tr>
<td>
<ul>
<li><a href=SearchResult.aspx?CategoryID=126>Door Hardware</a>
<ul>
<li><a href=SearchResult.aspx?CategoryID=132>Lever Sets</a></li>
<li><a href=SearchResult.aspx?CategoryID=133>Security Deadbolt</a></li>
<li><a href=SearchResult.aspx?CategoryID=134>More Door Hardware</a></li>
</ul>
</ul>
</td>
</tr>

This is my problem.

I would love to make this a nice, easy to follow and SE friendly list of links with any of the plethora of css vertical menu’s out there. This is only a two level list, so I’ve tried using A List Apart’s Horizontal Menu

Example

But here is my problem.

In FF, this works FANTASTIC. But in IE, ONLY the first row wll render. All of the subsequent ul rows will show the main UL, but when I mouse over, no sub-set.

I don’t know if this is a css or asp.net question. hopefully the mod of this forum would move it if it is wrong.

I’m currently working on a link to the menu so you can see what happens.

Any ideas?

I can’t supply on online example, but I can give you the source on my machine.


<tr>
<td>
<ul id="nav">
<li><a href=SearchResult.aspx?CategoryID=2>Cabinet Hardware</a>
<ul>
<li><a href=SearchResult.aspx?CategoryID=4>Knobs</a></li>
<li><a href=SearchResult.aspx?CategoryID=5>Pulls and Handles</a></li>
<li><a href=SearchResult.aspx?CategoryID=6>Backplates & Knobs</a></li>
<li><a href=SearchResult.aspx?CategoryID=7>Refrigerator Pulls</a></li>
<li><a href=SearchResult.aspx?CategoryID=8>T-Bars/ Barrel Pulls</a></li>
<li><a href=SearchResult.aspx?CategoryID=121>Drop Pulls</a></li>
</ul>
</ul>
</td>
</tr>
<tr>
<td>
<ul id="nav">
<li><a href=SearchResult.aspx?CategoryID=126>Door Hardware</a>
<ul>
<li><a href=SearchResult.aspx?CategoryID=132>Lever Sets</a></li>
<li><a href=SearchResult.aspx?CategoryID=133>Security Deadbolt</a></li>
<li><a href=SearchResult.aspx?CategoryID=134>More Door Hardware</a></li>
</ul>
</ul>
</td>
</tr>

This works FANTASTIC in FF, but only renders the first fly-out in IE, all rows after, no dice.

Again, any ideas?

IN FF.
ul.jpg

IN IE
ulie.jpg

Hi,

Can you post the javascript code you are using to activate the flyouts in ie?

CSS


body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}
	
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 198px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \\*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

java


// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

You have given the second ul an id of #nav again and id’s must be unique per page. The javascript will only find the first id (with any luck) and only the first one will be styled.

You would need to give a different id to subsequent menus and then supply their id to the js.

e.g.
http://www.pmob.co.uk/temp/drop-down-2lists.htm

Alternatively wrap the menus in a container which has an id that can be targetted and use this javscript instead which will find all li within that id.

http://www.pmob.co.uk/temp/drop-down-multiple.htm

Or you could target all list elements but isn’t really ideal . There is more information here:

http://www.htmldog.com/articles/suckerfish/

Also note that your ul stying will apply to all lists unless you give them a class etc and use that class in the css to describe them.

Problem with this is,

This is a repeating element. There is no way to change each id.

Maybe I should post this same thread to the asp.net section, as it looks like it’s not a css issue.

Alternatively wrap the menus in a container which has an id that can be targetted and use this javscript instead which will find all li within that id.

http://www.pmob.co.uk/temp/drop-down-multiple.htm

After experimenting and experimenting and experimenting, this one finally did it.

This is what I did.


<%@ Control Language="vb" AutoEventWireup="false" Codebehind="HL_ucCategoryNavigator.ascx.vb" Inherits="StoreFront.StoreFront.HL_ucCategoryNavigator" TargetSchema="http://schemas.microsoft.com/intellisense/nav4-0" enableViewState="True" %>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	var sfEls = document.getElementById("allnavs").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


//--><!]]></script>

<style type="text/css">
@import "style3.css";
</style>

<div id="allnavs">
<asp:DataList id="dlMainCat" runat="server" DataKeyField="uid">
<ItemTemplate>
<ul>
<li><a href=SearchResult.aspx?CategoryID=<%# DataBinder.Eval(Container.DataItem, "uid") %>><%# DataBinder.Eval(Container.DataItem, "Name") %></a>
<ul>
<asp:Repeater id="rptSubCategory" runat="server">
<ItemTemplate>
<li><a href=SearchResult.aspx?CategoryID=<%# DataBinder.Eval(Container.DataItem, "uid") %>><%# DataBinder.Eval(Container.DataItem, "Name") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</ul>
</ItemTemplate>
</asp:DataList>
</div>

This one worked like a charm. Thank you, Thank you, Thank you, Thank you, Thank you, Thank you, Thank you.

:weee: