On Nov 27, 2007, at 1:58 PM, Robert James wrote:
> I'm displaying <a> elements with CSS like this:
>
> a.button-style
> {
> display: table-cell;
> width: 100px;
> height: 70px;
> background-color: blue;
> vertical-align: middle;
> margin-top: 20px;
> }
>
> Works great. However, the margin-top is ignored - I assume this is
> because
> table-cell is not a block element. Is there another way to create the
> equivalent of margins?
Margin does not apply to elements with display:table-cell.
<http://www.w3.org/TR/CSS21/box.html#propdef-margin>
(and, you probably know this, IE 6 and 7 do not support display:table-
cell.)
As for an alternative to margin-top, no, not really. There is the
border-spacing property that applies to tables (it is the equivalent
to cellspacing in html).
You probably want to style the parent element somehow.
> Also: Is there a way to display more than one of these on the same
> line?
If you have <a href="">xxx</a> <a href="">xxx</a> <a href="">xxx</a>
That should form one row.
Otherwise, while using display:table-cell, please read carefully:
<http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes>
A display:table-cell needs a display:table around it (and table-row).
The rendering engine will generate this for you. The resulting
construction may or may not be what you expect.
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
