Help with some styling issues

Help with some styling issues

am 17.06.2007 02:17:30 von 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

Re: Help with some styling issues

am 17.06.2007 02:45:56 von Neredbojias

On Sun, 17 Jun 2007 00:17:30 GMT Jon Slaughter scribed:

>
> 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.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: Help with some styling issues

am 17.06.2007 03:16:03 von cfajohnson

On 2007-06-17, Jon Slaughter wrote:
>
> 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.

--
Chris F.A. Johnson
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Re: Help with some styling issues

am 17.06.2007 03:35:12 von dorayme

In article ,
"Chris F.A. Johnson" wrote:

> On 2007-06-17, Jon Slaughter wrote:
> >
> > 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.

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

--
dorayme

Re: Help with some styling issues

am 17.06.2007 03:57:01 von cfajohnson

On 2007-06-17, Jon Slaughter wrote:
>
> 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)

Like this?

> 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.

> 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).


--
Chris F.A. Johnson
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Re: Help with some styling issues

am 17.06.2007 10:44:41 von Ben C

On 2007-06-17, Jon Slaughter wrote:
>
> 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.

Re: Help with some styling issues

am 17.06.2007 12:38:50 von Jon Slaughter

"Ben C" wrote in message
news:slrnf79t28.9do.spamspam@bowser.marioworld...
> On 2007-06-17, Jon Slaughter wrote:
>>
>> 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".
>

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

Re: Help with some styling issues

am 17.06.2007 12:46:38 von Jon Slaughter

"Ben C" wrote in message
news:slrnf79t28.9do.spamspam@bowser.marioworld...
> On 2007-06-17, Jon Slaughter wrote:
>>
>> 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.

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