[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: About merging the Hurd homepage and the Hurd wiki

From: olafBuddenhagen
Subject: Re: About merging the Hurd homepage and the Hurd wiki
Date: Sun, 23 Nov 2008 10:40:34 +0100
User-agent: Mutt/1.5.18 (2008-05-17)


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

This is much more elegant -- it states exactly what we need, which is
easier to understand, and works properly in all corner cases...


reply via email to

[Prev in Thread] Current Thread [Next in Thread]