applying css

hey guys, i have a treeview and i am displaying it like a menu.

i am having problem applying css for it.

well i did do some css and it works fine in IE 6,7,8  but google chrome it jumps out.

here is how it looks in google chrome

 treeview in google chrome
the root start from IT equipment

can any one help me to solve my problem?

here is my css style sheet:

 
.TreeView
{
	padding: 0px;
	margin: 0px;
	width: 214px;
}

.NodeStyle
{
	padding: 0px;
	margin: 0px;
	background-image: url(       '../images/MasterPage/menu/center.png' );
	background-repeat: no-repeat;
	width: 214px;
	font-family: Arial;
	font-size: 11px;
}

.RootStyle
{
	padding: 0px;
	margin: 0px;
	display: block;
	line-height: 31px;
}

.ParentStyle
{
	padding: 0px;
	margin: 0px;
	display: block;
	line-height: 31px;
	background-image: url( '../images/MasterPage/menu/center_indent_1.png' );
	background-repeat: no-repeat;
}

.LeafStyle
{
	padding: 0px;
	margin: 0px;
	display: block;
	line-height: 31px;
	background-image: url(  '../images/MasterPage/menu/center_indent_2.png' );
	background-repeat: no-repeat;
}

.HoverNodeStyle
{
	text-decoration: none;
	color: #8b8b8b;
}

.SelectedNodeStyle
{
	text-decoration: none;
	color: #8b8b8b;
}

Open in new window


please help?
JCWEBHOSTAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Carl TawnConnect With a Mentor Systems and Integration DeveloperCommented:
Try adding this style to your page:
#ctl00_IT_Equipment_Viewn0Nodes tr:first-child
{
     display:inline;
}

Open in new window

0
 
Carl TawnSystems and Integration DeveloperCommented:
Can you post the HTML that is generated for the treeview? It is easier to diagnose if we can replicate the issue.
0
 
JCWEBHOSTAuthor Commented:
<a href="#ctl00_IT_Equipment_View_SkipLink"><img alt="Skip Navigation Links." src="/jcwebhost.za.com/WebResource.axd?d=5XosgShVCOshfhi2eqGBEw2&amp;t=634322130217968750" width="0" height="0" style="border-width:0px;" /></a><div id="ctl00_IT_Equipment_View" class="TreeView" style="font-weight:normal;width:214px;">

		<table cellpadding="0" cellspacing="0" style="border-width:0;">

			<tr>

				<td class="NodeStyle ctl00_IT_Equipment_View_2 RootStyle ctl00_IT_Equipment_View_4" onmouseover="TreeView_HoverNode(ctl00_IT_Equipment_View_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_IT_Equipment_View_0 NodeStyle ctl00_IT_Equipment_View_1 RootStyle ctl00_IT_Equipment_View_3" href="javascript:__doPostBack('ctl00$IT_Equipment_View','s1')" onclick="TreeView_SelectNode(ctl00_IT_Equipment_View_Data, this,'ctl00_IT_Equipment_Viewn0');" id="ctl00_IT_Equipment_Viewn0" style="border-style:none;font-size:1em;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IT Equipment</a></td>

			</tr>

		</table>

	</div><a id="ctl00_IT_Equipment_View_SkipLink"></a>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Carl TawnSystems and Integration DeveloperCommented:
I actually meant the markup for the ones that are out of step, rather than tha e one that is displaying properly!

I don't suppose you have this page somewhere publicly available?
0
 
JCWEBHOSTAuthor Commented:
code

sorry here the problem

its the td with the empty space which making the node go 1 px front
0
 
JCWEBHOSTAuthor Commented:
i did say ShowExpandCollapse="False"

but in google chrome it inserting a td with 1px width
0
 
Carl TawnSystems and Integration DeveloperCommented:
Try adding a style of "border-collapse:collapse" to the table element. It's difficult to be definite without having the markup to work with. Does the TD style actually say 1px, or does it have &nbsp; as its content, or is it literally an empty cell?
0
 
JCWEBHOSTAuthor Commented:
nope not working.
0
 
JCWEBHOSTAuthor Commented:
nope the TD just have a _ in it
0
 
JCWEBHOSTAuthor Commented:
ok look at this link in google chrome

http://www.jcwebhostza.com/


0
 
JCWEBHOSTAuthor Commented:
in my css?
0
 
Carl TawnSystems and Integration DeveloperCommented:
Yes. Either in that block that is hardcoded in the top of the page, or in one of your stylesheets. Somewhere near the other treeview styles would make sense.
0
 
JCWEBHOSTAuthor Commented:
Thank you very much!!!!!!!!!!!!

it works prefect!!!!!!!!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.