[Plone-UI] verticle position and height of portal-column-one, -content and -two

Shuens s.huens at gmail.com
Thu Jul 30 00:18:52 UTC 2009


On Wed, Jul 29, 2009 at 6:10 PM, Veda Williams<veda at onenw.org> wrote:
> Hi Jeanie,
> On 7/29/09 1:20 PM, "Jeanie" <jeanie.schwenk at gmail.com> 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?


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




More information about the UI mailing list