Complex CSS challenge: how to move the threaded discussion forward?

HTML & CSS
1

Hello,

We run an on-line news site where people can post the news and reply to the news and the replies. What we want is for the replies to display in a threaded fashion. That is like:

Comment_1
	Reply_1_1
	Reply_1_2
		Reply_1_2_1
		Reply_1_2_2
		Reply_1_2_3
	Reply_1_3
	Reply_1_4
		Reply_1_4_1
		Reply_1_4_2
			Reply_1_4_2_1
		Reply_1_4_3

So bottom line with the replies thread moving forward.
However we keep getting replies thread moving inward.
As you can see here for example:

Gas hits $4 per Gallon, may hit $5, Republicans say do Nothi - RealNewsPost.com

So what do we need to change in the underlying CSS code for the replies to properly thread forward?

FYI, the threaded replies are generated via recursion

ThanX,.

2

Sorry. The Sitepoint post removed all the spaces from behind the sample threaded discussion that I posted to my message. So please imagine the fake sample threads as moving forward as per the numbers on each thread.

3

the way your page is coded each nested reply is 90% the width of its parent and in the normal flow. so the indent would naturally happen as seen ( the remaining 10% would be on the right)

what you might want to do is remove (not change… REMOVE) the width declaration on .reply_text and add padding-left:10%

hope that helps

4

[ot]

Added code tags to make it clearer.[/ot]

5

Hi,

As per your suggestion with some changes the threading indentation is better now.

However there is a new problem I dont seem to be able to get rid off!
That is as you can see from looking at the comment area is not liging up with the Text box area and the rest of the page items above it!
And I tried all sort of <center> but nothing, it remains out of wack!

ThanX,

6

You would have to remove the width=“95%” on the table element, and then put something like this at the bottom of your CSS file:

.page_body {margin-left: 0;}

Ideally, you wouldn’t have a 5px left margin on the .page_body class in the first place, though.

The <center> element is badly out of date now, so I recommend you remove it.

7

Actually, I thought this might happen. Since you only want the CHILDREN of the main comments to be indented ( the first comments should line up with the comment and text area) you could do something like :
.reply_text .reply_text {padding-left:10%}

that way ONLY replies within replies will have indents.

8

Hi,

This suggestion of yours did not work at all.
But got me thinking.

So at the end we resolved it by making the comments part of the Table
above it with the Replies to the comments formed via Divs.

ThanX.