Solved

applying css

Posted on 2011-03-14
13
355 Views
Last Modified: 2012-05-11
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
Comment
Question by:JCWEBHOST
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35126710
Can you post the HTML that is generated for the treeview? It is easier to diagnose if we can replicate the issue.
0
 

Author Comment

by:JCWEBHOST
ID: 35126832
<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
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35126856
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:JCWEBHOST
ID: 35126870
code

sorry here the problem

its the td with the empty space which making the node go 1 px front
0
 

Author Comment

by:JCWEBHOST
ID: 35126892
i did say ShowExpandCollapse="False"

but in google chrome it inserting a td with 1px width
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35126921
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
 

Author Comment

by:JCWEBHOST
ID: 35126951
nope not working.
0
 

Author Comment

by:JCWEBHOST
ID: 35126954
nope the TD just have a _ in it
0
 

Author Comment

by:JCWEBHOST
ID: 35126969
ok look at this link in google chrome

http://www.jcwebhostza.com/


0
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 500 total points
ID: 35127077
Try adding this style to your page:
#ctl00_IT_Equipment_Viewn0Nodes tr:first-child
{
     display:inline;
}

Open in new window

0
 

Author Comment

by:JCWEBHOST
ID: 35127083
in my css?
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35127095
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
 

Author Closing Comment

by:JCWEBHOST
ID: 35127105
Thank you very much!!!!!!!!!!!!

it works prefect!!!!!!!!!!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
email validation 9 48
need help with share buttons 11 66
CSS Flex space-between 2 20
Problem to copy file 14 46
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question