JQuery TreeView Large, issue with modifications

[ironclads]

I'm starting out with the large example in the jquery.treeview.zip. When I attempt to modify the example a bit, I can't actually change the width of the spans I've embedded into the <LI> tags. Nothing I do will seem to let me change the width. They default to the length of the text in them and that's it. Is there a way, or where in the css or js files would I change code in order to be able to change the width.

Original looks like this:

<ul id="tree">
	<li><a href="?/index.cfm"><strong>Home</strong></a>
	<ul>
		<li><a href="?/enewsletters/index.cfm">Airdrie eNewsletters </a></li>
		<li><a href="?/index.cfm">Airdrie Directories</a></li>
		<li><a href="?/economic_development/video/index.cfm">Airdrie Life Video</a></li>

		<li><a href="?/index.cfm">Airdrie News</a></li>
		<li><a href="?/index.cfm">Airdrie Quick Links</a></li>
		<li><a href="?http://weather.ibegin.com/ca/ab/airdrie/">Airdrie Weather</a></li>
		<li><a href="?/human_resources/index.cfm">Careers</a> | <a href="?/contact_us/index.cfm">Contact Us</a> | <a href="?/site_map/index.cfm">Site Map</a> | <a href="?/links/index.cfm">Links</a></li>

		<li><a href="?/calendars/index.cfm">Community Calendar </a></li>
		<li><a href="?/conditions_of_use/index.cfm">Conditions of Use and Privacy Statement</a></li>
		<li><a href="?/index.cfm">I'd like to find out about... </a></li>
		<li><a href="?/index.cfm">Opportunities</a></li>
		<li><a href="?/links/index.cfm">Resource Links</a></li>
		<li><a href="?/index.cfm">Special Notices</a></li>

	</ul>

My modified code looks like this:

<ul id="tree">
	<li><a href="?/index.cfm"><strong>Home</strong></a>
	<ul>
		<li><a href="?/enewsletters/index.cfm">Airdrie eNewsletters </a></li>
		<li><a href="?/index.cfm">Airdrie Directories</a></li>
		<li><a href="?/economic_development/video/index.cfm">Airdrie Life Video</a></li>
		<li><a href="?/index.cfm"><SPAN CLASS="COL1" ID="T1" STYLE="width:170px; background-color: #FF0000;">Airdrie Directories</SPAN><SPAN CLASS="COL2">TEstCol2</SPAN><SPAN CLASS="COL3">TestCol3</SPAN></a></li>
		<li><a href="?/index.cfm"><TABLE><TR><TD STYLE="width:300; background-color: #FF00FF;">Airdrie Quick Links</TD></TR></TABLE></a></li>
		<li><a href="?http://weather.ibegin.com/ca/ab/airdrie/">Airdrie Weather</a></li>
		<li><a href="?/human_resources/index.cfm">Careers</a> | <a href="?/contact_us/index.cfm">Contact Us</a> | <a href="?/site_map/index.cfm">Site Map</a> | <a href="?/links/index.cfm">Links</a></li>

		<li><a href="?/calendars/index.cfm">Community Calendar </a></li>
		<li><a href="?/conditions_of_use/index.cfm">Conditions of Use and Privacy Statement</a></li>
		<li><a href="?/index.cfm">I'd like to find out about... </a></li>
		<li><a href="?/index.cfm">Opportunities</a></li>
		<li><a href="?/links/index.cfm">Resource Links</a></li>
		<li><a href="?/index.cfm">Special Notices</a></li>

	</ul>

As you can see, I've tried both SPAN and TABLE to create a wider column, but neither will work. I've tried coding the width into a class and just inline. I can change all kinds of other properties, but not width/height. Does anyone here know how I could change the width of values embedded in the <LI> tags? I'm hoping to be able to have columns inside these <LI> tags and be able to use CSS/JavaScript to dynamically size them as needed. Any ideas or help is greatly appreciated. Let me know if you have any questions. Thank you.

[Beverleyh]

Spans are inline elements by default so they only taking up the minimum space necessary. To change this behaviour, you would need to set them to display:inline-block;, then you can add paddings and width, etc.

Using one of your spans as an example; <SPAN CLASS="COL1" ID="T1" STYLE="display:inline-block; width:170px; background-color: #FF0000;">Airdrie Directories</SPAN>

If you need more help, please provide a link to your page.

[ironclads]

Thank you. I find it's the simple things in life that mean the most, and it's the simple things in code that mess me up. Thank you for helping me see the forest through the trees.

Spans are inline elements by default so they only taking up the minimum space necessary. To change this behaviour, you would need to set them to display:inline-block;, then you can add paddings and width, etc.

Using one of your spans as an example; <SPAN CLASS="COL1" ID="T1" STYLE="display:inline-block; width:170px; background-color: #FF0000;">Airdrie Directories</SPAN>

If you need more help, please provide a link to your page.