Le 28 nov. 2012 à 08:17, Kyle Sessions <[email protected]> a écrit :
> I have a div in my project that I had styled with rounded corners
> (border-radius: 4px; border: 1px solid #aaa;). Then, later on, for
> layout/display purposes, I gave that div display: table-row-group;. (I've
> actually tried several table-related display options, with the same
> result.) But as soon as I give it that, I lose my rounded corners and my
> border. I suspect that border and border-radius probably only apply to
> block elements, and any table-related display option means it's no longer
> block display? Any ideas what I can do about this?
Setting the element to display: table would allow the border and border-radius
to apply. display: table-row-group is equivalent to <tbody> and only allows
limited styling due to how the table-painting model works. Note also that the
browser will generate a (anonymous) display:table parent element and
(anonymous) display:table-row and display:table-cell elements. [*]
>
> Incidentally, giving it a table-related display also broke the width. I'm
> working on a mobile project, and when this div has a table-related display
> option, the content inside the div forces it to be too wide for my mobile
> browser, where, as a block-level element, it fits.
That it to be expected, depending on the contents of that element, the same as
if it was a real table. You might try
div {
display: table;
width: 100%;
table-layout: fixed;
}
[*] http://www.w3.org/TR/CSS21/tables.html
Philippe
--
Philippe Wittenbergh
http://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/
