Hi,
On Wed, Nov 12, 2008 at 03:38:56PM +0100, Thomas Schwinge wrote:
> By now I know more about CSS than I ever wanted.
I like CSS :-)
(In fact, I like declarative languages in general...)
> But still not enough:
>
> .newsitemcontent
> {
> /* TODO. Why is this needed to make the floating text appear on the
> same
> vertical height as is the item's title? */
> margin-top: -10px;
> }
The problem is:
.newsitem { padding: 2px; }
The reason why the 2px have such a drastic effect here, is that as soon
as you add a padding, the margin of any inner elements is no longer
conflated with the marign of the outer element -- in this case, the
standard top (and bottom) margin of <p> is not conflated with the <div
class='newsitem'> anymore. This is also why the RSS/Atom buttons stick
to the top of the news items. (The div has no margin, so without the
<p>'s margin, there is none at all...)
You could work around this by adding:
.newsitemheader { margin-top: 1em; }
This way, it has the same margin as the <p>, and they are aligned again.
Or you could disable the <p>'s margin with:
.newsitemcontent p { margin-top: 0; }
Both workarounds are quite ugly though: It's hard to understand what
happens here, and the side effects are not quite right. (You'd need more
workarounds to make it look really right in all corner cases.)
I wonder why you have the ".newsitem { padding: 2px; }" there at all? Is
it to make sure the headers of short news items don't stick together? If
so, I suggest adding instead:
.newsitemheader { margin-bottom: 1em; }
(Leaving out the ".newsitem { padding: 2px; }" as well as any
workarounds.)
This is much more elegant -- it states exactly what we need, which is
easier to understand, and works properly in all corner cases...
-antrik-
