slanting zigzag text

[dhanlak]

Hi all,
I have a asp.net gridview in a page.
I am trying to create a table using divs inside the tds of the gridview. The div in the td contains 4 inner divs. Each div contains some text.

But, the text in each div takes a different direction. It appears to be slanting and zig-zag.

I changes the display property, changed the font sizes. But nothing works. I want all the text to appear in a neat line.

Plz help me!

[Mottie]

Could you share some HTML (processed, not raw asp) or better yet provide us a demo on jsFiddle.net, we would be able to better help you.

[dhanlak]

hi,
My html code is here

http://jsfiddle.net/LFpnf/

The css code for the html page:

.tblItemHeaderClass
{
font-family:Verdana;
font-size:11px;
color:Black;
font-weight:bold;
}

.AccountItems .expandDatesOuter
{
background: url(“../Images/tree_minus.gif”) no-repeat;
background-position:3px 50%;
cursor:pointer;
}

.AccountItems .expandDatesOuterInactive
{
background: url(“../Images/tree_plus.gif”) no-repeat;
background-position:3px 50%;
cursor:pointer;
}

.runningtotal
{
/* used for jquery code */
}

.hideelement
{
/* used for jquery code */
}

.innerDiv
{
overflow:hidden;
padding-top:2px;
padding-bottom:2px;
/*

---

*/
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Actually this table displays hierarchial data. The top level is Account number. Next is date, Next is sub category
I tried using tables. But, that too did not work. It occupies so much of space. I prefer using divs but the text is slanting. Can you please find what is the correct way to do this.

[dhanlak]

I tried using tables, but that also does not work. This is the code that i tried:

Here is the code:

http://jsfiddle.net/SCZvf/

The text Equipment and Equipment OT are too slanting. Can you please correct this? Or is there any alternative solution?

[Mottie]

First off, I don’t understand what you mean by “slanting”. Even after looking at “Time and Equipment” and “Time and Equipment OT” in the second example, I still don’t understand. Do you mean the text wraps to the next line?

Secondly, you should be using tables since it’s tabular data. I would recommend building the table with the data inside first, then add all of the fancy divs to add color and styling.

Lastly, table cells can not float. Use “colspan” and “rowspan” to make the table cell layout the way you want it.

[Author]

Posts