On 18/06/2009, at 12:19 PM, MEM wrote:
> Hello,
>
> I’m trying to work with boxes having rounded corners and gradient
> borders.
> I’m using a 1 image technique to accomplish that.
>
> Some boxes will eventually need some scrollbars. But I’m having a
> hard time
> figuring out, how can we properly position the scrollbar so that I
> can have
> equal top and bottom margins?
>
> I was hoping that playing the margins of the wrapper div will do the
> trick.
> But no success. :(
>
> Please have a look here: (The css is inside and has been validated).
> http://www.cantinho.org/pt/cantinho-site/
> rounded_gradient_boxes_v3.html
>
Hi Marcio - I would avoid using percentages for margins in this case
if you want to control where the scrollbar sits. See below:
.dialog .wrapper {
margin-right: 32px; /* changed from 3% */
margin-top: 0; /* changed from 3% */
max-height: 400px;
overflow: auto;
position: static;
}
You need to set padding on .dialog .content. e.g.
.dialog .content {
padding: 32px 0 0 12px;
}
I *highly* recommend that you familiarise yourself with firebug. It is
perfect for these types of situations. Here is what I did when looking
at your problem:
1. 'inspect' the elements. This puts an outline around an elements so
you can see where it fits in the structure.
2. Select the element you want to modify in the left hand column.
3. Edit the CSS in the right hand column.
This way you can see exactly what is happening and exactly what impact
your changes are having immediately. You can even use the arrow keys
to nudge values up and down until things look right. Obviously this is
only changing thing temporarily so the next step is to..
4. Copy the changed CSS values and paste into your file.
Cheers, Tim
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
