verticle position and height of portal-column-one, -content and -two

[Jeanie]

This display issue is not browser specific - I'm getting the same behavior in both IE and Firefox.

I'm using the latest firebug and can see that portal-column-one, portal-column-content and portal-column-two are at the same top position.  However, when they display, they are at three different heights.  I've tried changing the margins and even the padding and it is not working.  The website is still in development:  jschwenk.webfactional.com.  

When I look at the margins (purple in firebug), the top of the portal-column-content and portal-column-two are the same but they display at different heights.  I want them to display at the same height.

I also want to have a small (4 pixels or so) margin at the bottom between the bottom of the portals and the little brown line at the bottom so it looks consistent on each page.  The portal-column-content bottom edge displays differently depending on which page is loaded.  Sometimes it's butted up against the small brown line, other times it's 30 pixels high and other times there's a HUGE gap between the end of the content and the line at the bottom.

This is driving me nuts.  The theming book I ordered hasn't arrived yet but I've been reading the docs on plone.org.  Maybe I'm not searching for the right thing as I'm coming up empty-handed and I'm sure others have run into this.  It's probably something simple.  Can anyone point me in the correct direction?

Thanks in advance,

Jeanie

[vedaw]

Hi Jeanie,

On 7/29/09 1:20 PM, "Jeanie" <[hidden email]> wrote:

>
> This display issue is not browser specific - I'm getting the same behavior in
> both IE and Firefox.
>
> I'm using the latest firebug and can see that portal-column-one,
> portal-column-content and portal-column-two are at the same top position.
> However, when they display, they are at three different heights.  I've tried
> changing the margins and even the padding and it is not working.  The
> website is still in development:  jschwenk.webfactional.com.

I'm not 100% sure I follow, but here goes...

Try looking at #portal-column-one .visualPadding  and #portal-column-two
.visualPadding. You probably only want padding settings on these, not
margins as well. I tend to apply margin settings to the parent classes, e.g.
#portal-column-one and #portal-column-two.

>
> When I look at the margins (purple in firebug), the top of the
> portal-column-content and portal-column-two are the same but they display at
> different heights.  I want them to display at the same height.

Do you mean the height of the columns should be the same, or are you saying
that the tops of the two columns need to line up horizontally? If you mean
the latter, removing the margin setting from #portal-column-one
.visualPadding should solve this problem.

>
> I also want to have a small (4 pixels or so) margin at the bottom between
> the bottom of the portals and the little brown line at the bottom so it
> looks consistent on each page.  The portal-column-content bottom edge
> displays differently depending on which page is loaded.  Sometimes it's
> butted up against the small brown line, other times it's 30 pixels high and
> other times there's a HUGE gap between the end of the content and the line
> at the bottom.

Can you give some sample URLs here?

If I read you right, the brown line at the bottom is set to display directly
above the #portal-footer, so if there isn't much content in
#portal-column-content, the brown line will appear just below the longest
column (often the left column).

>
> This is driving me nuts.  The theming book I ordered hasn't arrived yet but
> I've been reading the docs on plone.org.  Maybe I'm not searching for the
> right thing as I'm coming up empty-handed and I'm sure others have run into
> this.  It's probably something simple.  Can anyone point me in the correct
> direction?

If you can provide the URLs, it'll be easier to tell if this is just a CSS
issue or if it's more of a conceptual issue.

Cheers,

- Veda

>
> Thanks in advance,
>
> Jeanie


_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Shuens]

inline,

On Wed, Jul 29, 2009 at 6:10 PM, Veda Williams<[hidden email]> wrote:

> Hi Jeanie,
>
> On 7/29/09 1:20 PM, "Jeanie" <[hidden email]> wrote:
>
>>
>> This display issue is not browser specific - I'm getting the same behavior in
>> both IE and Firefox.
>>
>> I'm using the latest firebug and can see that portal-column-one,
>> portal-column-content and portal-column-two are at the same top position.
>> However, when they display, they are at three different heights.  I've tried
>> changing the margins and even the padding and it is not working.  The
>> website is still in development:  jschwenk.webfactional.com.
>
> I'm not 100% sure I follow, but here goes...
>
> Try looking at #portal-column-one .visualPadding  and #portal-column-two
> .visualPadding. You probably only want padding settings on these, not
> margins as well. I tend to apply margin settings to the parent classes, e.g.
> #portal-column-one and #portal-column-two.

One tiny correction i would like to add to Veda's comment. Tables in
some way are different like a special block element. The margin
property is ignored for table columns and cells, therefore a margin
hover the "#portal-column-one" or "#portal-column-two" is not going to
take effect. Aside from that, you should look at the .visualPadding
class inside the columns as Veda mentioned.

>
>>
>> When I look at the margins (purple in firebug), the top of the
>> portal-column-content and portal-column-two are the same but they display at
>> different heights.  I want them to display at the same height.
>
> Do you mean the height of the columns should be the same, or are you saying
> that the tops of the two columns need to line up horizontally? If you mean
> the latter, removing the margin setting from #portal-column-one
> .visualPadding should solve this problem.

If you want *just* the "portal-column-content" and the
"portal-column-two" to display at the same height, than I suggest
setting the  "#portal-column-content" rule in your css file with the
value => padding: 0 1em;. The reason for this is because the
background color is in the "portal-column-two" element, a <td> and
there you can't set a margin, like I explained above.

>
>>
>> I also want to have a small (4 pixels or so) margin at the bottom between
>> the bottom of the portals and the little brown line at the bottom so it
>> looks consistent on each page.  The portal-column-content bottom edge
>> displays differently depending on which page is loaded.  Sometimes it's
>> butted up against the small brown line, other times it's 30 pixels high and
>> other times there's a HUGE gap between the end of the content and the line
>> at the bottom.
>
> Can you give some sample URLs here?

+1

>
> If I read you right, the brown line at the bottom is set to display directly
> above the #portal-footer, so if there isn't much content in
> #portal-column-content, the brown line will appear just below the longest
> column (often the left column).
>
>>
>> This is driving me nuts.  The theming book I ordered hasn't arrived yet but
>> I've been reading the docs on plone.org.  Maybe I'm not searching for the
>> right thing as I'm coming up empty-handed and I'm sure others have run into
>> this.  It's probably something simple.  Can anyone point me in the correct
>> direction?
>
> If you can provide the URLs, it'll be easier to tell if this is just a CSS
> issue or if it's more of a conceptual issue.

+1


regards...
Q.

--
www.menttes.com

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[vedaw]

>> Try looking at #portal-column-one .visualPadding  and #portal-column-two
>> .visualPadding. You probably only want padding settings on these, not
>> margins as well. I tend to apply margin settings to the parent classes, e.g.
>> #portal-column-one and #portal-column-two.
>
> One tiny correction i would like to add to Veda's comment. Tables in
> some way are different like a special block element. The margin
> property is ignored for table columns and cells, therefore a margin
> hover the "#portal-column-one" or "#portal-column-two" is not going to
> take effect. Aside from that, you should look at the .visualPadding
> class inside the columns as Veda mentioned.

You are right. But in a tableless world, it would work, yes?

Cheers,

- Veda


_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Shuens]

On Wed, Jul 29, 2009 at 9:24 PM, Veda Williams<[hidden email]> wrote:

>
>>> Try looking at #portal-column-one .visualPadding  and #portal-column-two
>>> .visualPadding. You probably only want padding settings on these, not
>>> margins as well. I tend to apply margin settings to the parent classes, e.g.
>>> #portal-column-one and #portal-column-two.
>>
>> One tiny correction i would like to add to Veda's comment. Tables in
>> some way are different like a special block element. The margin
>> property is ignored for table columns and cells, therefore a margin
>> hover the "#portal-column-one" or "#portal-column-two" is not going to
>> take effect. Aside from that, you should look at the .visualPadding
>> class inside the columns as Veda mentioned.
>
> You are right. But in a tableless world, it would work, yes?

indeed, in a tableless world should work


regards...
Q.

--
www.menttes.com

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Jeanie]

Apologies on taking so long to post back.

It was entirely a CSS issue.  It was a combination of .visualPadding, margins and padding.  Thank you so much as I now the get the same (desired) behavior in both Firefox and IE.

In the future, I will include more urls.

Regards,

Jeanie

On Wed, Jul 29, 2009 at 2:10 PM, Veda Williams <[hidden email]> wrote:

Hi Jeanie,

On 7/29/09 1:20 PM, "Jeanie" <[hidden email]> wrote:

>
> This display issue is not browser specific - I'm getting the same behavior in
> both IE and Firefox.
>
> I'm using the latest firebug and can see that portal-column-one,
> portal-column-content and portal-column-two are at the same top position.
> However, when they display, they are at three different heights.  I've tried
> changing the margins and even the padding and it is not working.  The
> website is still in development:  jschwenk.webfactional.com.

I'm not 100% sure I follow, but here goes...

Try looking at #portal-column-one .visualPadding  and #portal-column-two
.visualPadding. You probably only want padding settings on these, not
margins as well. I tend to apply margin settings to the parent classes, e.g.
#portal-column-one and #portal-column-two.

>
> When I look at the margins (purple in firebug), the top of the
> portal-column-content and portal-column-two are the same but they display at
> different heights.  I want them to display at the same height.

Do you mean the height of the columns should be the same, or are you saying
that the tops of the two columns need to line up horizontally? If you mean
the latter, removing the margin setting from #portal-column-one
.visualPadding should solve this problem.

>
> I also want to have a small (4 pixels or so) margin at the bottom between
> the bottom of the portals and the little brown line at the bottom so it
> looks consistent on each page.  The portal-column-content bottom edge
> displays differently depending on which page is loaded.  Sometimes it's
> butted up against the small brown line, other times it's 30 pixels high and
> other times there's a HUGE gap between the end of the content and the line
> at the bottom.

Can you give some sample URLs here?

If I read you right, the brown line at the bottom is set to display directly
above the #portal-footer, so if there isn't much content in
#portal-column-content, the brown line will appear just below the longest
column (often the left column).

>
> This is driving me nuts.  The theming book I ordered hasn't arrived yet but
> I've been reading the docs on plone.org.  Maybe I'm not searching for the
> right thing as I'm coming up empty-handed and I'm sure others have run into
> this.  It's probably something simple.  Can anyone point me in the correct
> direction?

If you can provide the URLs, it'll be easier to tell if this is just a CSS
issue or if it's more of a conceptual issue.

Cheers,

- Veda

>
> Thanks in advance,
>
> Jeanie

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[vedaw]

Some javascript/style in this post has been disabled (why?)

Great, glad to hear it! It’s always easier to see it, if at all possible...


On 7/30/09 8:04 PM, "Jeanie Schwenk" <[hidden email]> wrote:

Apologies on taking so long to post back.

It was entirely a CSS issue.  It was a combination of .visualPadding, margins and padding.  Thank you so much as I now the get the same (desired) behavior in both Firefox and IE.

In the future, I will include more urls.

Regards,

Jeanie


On Wed, Jul 29, 2009 at 2:10 PM, Veda Williams <[hidden email]> wrote:

Hi Jeanie,

On 7/29/09 1:20 PM, "Jeanie" <[hidden email]> wrote:

>
> This display issue is not browser specific - I'm getting the same behavior in
> both IE and Firefox.
>
> I'm using the latest firebug and can see that portal-column-one,
> portal-column-content and portal-column-two are at the same top position.
> However, when they display, they are at three different heights.  I've tried
> changing the margins and even the padding and it is not working.  The
> website is still in development:  jschwenk.webfactional.com <http://jschwenk.webfactional.com> .

I'm not 100% sure I follow, but here goes...

Try looking at #portal-column-one .visualPadding  and #portal-column-two
.visualPadding. You probably only want padding settings on these, not
margins as well. I tend to apply margin settings to the parent classes, e.g.
#portal-column-one and #portal-column-two.

>
> When I look at the margins (purple in firebug), the top of the
> portal-column-content and portal-column-two are the same but they display at
> different heights.  I want them to display at the same height.

Do you mean the height of the columns should be the same, or are you saying
that the tops of the two columns need to line up horizontally? If you mean
the latter, removing the margin setting from #portal-column-one
.visualPadding should solve this problem.

>
> I also want to have a small (4 pixels or so) margin at the bottom between
> the bottom of the portals and the little brown line at the bottom so it
> looks consistent on each page.  The portal-column-content bottom edge
> displays differently depending on which page is loaded.  Sometimes it's
> butted up against the small brown line, other times it's 30 pixels high and
> other times there's a HUGE gap between the end of the content and the line
> at the bottom.

Can you give some sample URLs here?

If I read you right, the brown line at the bottom is set to display directly
above the #portal-footer, so if there isn't much content in
#portal-column-content, the brown line will appear just below the longest
column (often the left column).

>
> This is driving me nuts.  The theming book I ordered hasn't arrived yet but
> I've been reading the docs on plone.org <http://plone.org> .  Maybe I'm not searching for the
> right thing as I'm coming up empty-handed and I'm sure others have run into
> this.  It's probably something simple.  Can anyone point me in the correct
> direction?

If you can provide the URLs, it'll be easier to tell if this is just a CSS
issue or if it's more of a conceptual issue.

Cheers,

- Veda

>
> Thanks in advance,
>
> Jeanie

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui