Help with some styling issues

[Jon Slaughter]

A php comments app that I'm trying to finish up on is at

http://www.abstractdissonance.com/PageComments.php

I'm having trouble styling the divs so that I can fix the width of the
comments but keep the right width justified instead of staggered as it is.
(or atleast its staggered in FF but not in IE)

Right now I'm just trying to get the basic styling stuff worked out and will
fix the other issues later. Just trying to get some idea of what I need to
code to make it work(all the php/mysql stuff is finished luckily). (not
worried about the source formatting at the moment so don't bitch that you
can't read it)

What I'd like to do is add some type of guides to the left of the messages
sorta like in windows explorer for folders where there is the dotted lines
that guide you to the nestings. Not sure if this is possible or not(atleast
in an easy way)?

Any other ideas to make it better would be appreciated too(I know the style
that I'm presenting right now is not good but it was just something I put
for now... I'll probably be adding a little graphical stuff to it to make it
look better along with adding more formating to improve readablility. Right
now I'm just trying to get over some of the major issues I'm having before I
try to work on the superficial aspects).

Thanks,
Jon

 

[Neredbojias]

A php comments app that I'm trying to finish up on is at

http://www.abstractdissonance.com/PageComments.php

I'm having trouble styling the divs so that I can fix the width of the
comments but keep the right width justified instead of staggered as it
is. (or atleast its staggered in FF but not in IE)

Looks the same in both to me.

 

[Chris F.A. Johnson]

A php comments app that I'm trying to finish up on is at

http://www.abstractdissonance.com/PageComments.php

I'm having trouble styling the divs so that I can fix the width of the
comments but keep the right width justified instead of staggered as it is.
(or atleast its staggered in FF but not in IE)

First, format the source code so that others can read it. The body
contains one 3,764-character line; that's ridiculous.

 

[dorayme]

First, format the source code so that others can read it. The body
contains one 3,764-character line; that's ridiculous.

Oh I dunno... it might contain big words in uncertain contexts...
perhaps better it is hidden...

 

[Chris F.A. Johnson]

A php comments app that I'm trying to finish up on is at

http://www.abstractdissonance.com/PageComments.php

I'm having trouble styling the divs so that I can fix the width of the
comments but keep the right width justified instead of staggered as it is.
(or atleast its staggered in FF but not in IE)

Right now I'm just trying to get the basic styling stuff worked out and will
fix the other issues later. Just trying to get some idea of what I need to
code to make it work(all the php/mysql stuff is finished luckily). (not
worried about the source formatting at the moment so don't bitch that you
can't read it)

Without being able to read it, it's hard to figure out what you
are doing.

 

[Ben C]

A php comments app that I'm trying to finish up on is at

http://www.abstractdissonance.com/PageComments.php

I'm having trouble styling the divs so that I can fix the width of the
comments but keep the right width justified instead of staggered as it is.
(or atleast its staggered in FF but not in IE)

In your style sheet (Comments.css) delete "position: relative" and
change "left: 50px" to "margin-left: 50px".

Relative positioning just offsets things from their normal flow
positions. So they would have lined up before you offset them, and
therefore not afterwards.

See CSS 2.1 10.3 for how widths are calculated. Basically in most cases
the properties you leave as auto get whatever values they need to fill
up the containing width. So if you increase the left margin the computed
value of width gets smaller so it all still fits.

But relative offsets are not taken into account in these calculations.
Everything in 10.3 is done first, and then things are translated by
their relative offsets at the end. This is explained in 9.3.1.

 

[Jon Slaughter]

In your style sheet (Comments.css) delete "position: relative" and
change "left: 50px" to "margin-left: 50px".

ok, it worked. I thought I tried that but I guess when I did I applied it to
the wrong div ;/

Relative positioning just offsets things from their normal flow
positions. So they would have lined up before you offset them, and
therefore not afterwards.

See CSS 2.1 10.3 for how widths are calculated. Basically in most cases
the properties you leave as auto get whatever values they need to fill
up the containing width. So if you increase the left margin the computed
value of width gets smaller so it all still fits.

But relative offsets are not taken into account in these calculations.
Everything in 10.3 is done first, and then things are translated by
their relative offsets at the end. This is explained in 9.3.1.

OK, I'm going to re read all that and see what I can come up with.

Thanks,
Jon

 

[Jon Slaughter]

In your style sheet (Comments.css) delete "position: relative" and
change "left: 50px" to "margin-left: 50px".

Relative positioning just offsets things from their normal flow
positions. So they would have lined up before you offset them, and
therefore not afterwards.

See CSS 2.1 10.3 for how widths are calculated. Basically in most cases
the properties you leave as auto get whatever values they need to fill
up the containing width. So if you increase the left margin the computed
value of width gets smaller so it all still fits.

But relative offsets are not taken into account in these calculations.
Everything in 10.3 is done first, and then things are translated by
their relative offsets at the end. This is explained in 9.3.1.

BTW, do you know of any way I could add some type of "connectors" to make
the messages clearer? I went ahead and changed the code to what you said so
if you want you could take a look again and then maybe understand what I
mean by "connectors"(paths that give some idea of the hierarchy).

Thanks,
Jon