[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

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?
0
JCWEBHOST
Asked:
JCWEBHOST
  • 8
  • 5
1 Solution
 
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
Carl TawnSystems and Integration DeveloperCommented:
Try adding this style to your page:
#ctl00_IT_Equipment_Viewn0Nodes tr:first-child
{
     display:inline;
}

Open in new window

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now