Re: About merging the Hurd homepage and the Hurd wiki

[olafBuddenhagen]

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-