Solved

applying css

Posted on 2011-03-14
13
345 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
  • 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
 

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now