Not a bug .message .messageMeta needs a clear:both

[Garani]

In message.css the style .message .messageMeta should have an added "clear:both".

The fixed code should look like this:

	.message .messageMeta
	{
		@property "messageMeta";
		font-size: 11px;
		padding: 15px 5px 5px;
		margin: -5px;
		overflow: hidden;
		zoom: 1;
		clear:both;
		@property "/messageMeta";
	}

The reason for the clear:both is because if there is any added DIV or HTML data together with the message, either before, after or "aside", without such statement the MetaBar gets pushed up at the beginning of the message superimposing on the message text.

 

[Mike]

I don't totally follow what you're suggesting at the end - I suspect that you're talking about adding floats of some sort in the message body. If that's the case, you will likely want to do float containment on them. If not, then the clear may be necessary for you but it has side effects; it will force the metadata to always be below the user info (even if it's 500px tall with a 1 line message). That's not what we want.

 

[Kier]

I'm not entirely clear as to the problem you are describing here. Could you post a screen grab?

 

[Garani]

Can't post screenshot at the moment, but the trouble is this:

The post li-block is divided in 2 divs:
1) messageUserInfo - which contains the right side user's info
2) messageInfo primaryContent - which contains the text message and the Meta Commands

primaryContent contains:
1) messageContent - the message itself
2) messageMeta - the username and time of post, with whatever commands available to the user, including the like and reply commands

All this works fine as it is. But if you try to divide the messageContent in two areas (in may case a left messageContent and right messageExtraData) the messageMeta div-block get's pushed right at the beginning of primaryContent div-block. If you are to add a "clear: both" statement in the messageMeta, it goes back behaving normally again.

How to reproduce
To messageContent add a "float:left" statement (even via firefox on the fly), you will see messageMeta pushed upward.

If you add the "clear:both" statement it is not detrimental of the working of the messageMeta div-block (did test it). This is true for 16:9 screens as well as 4:3 screens.

The reason for me to submit this request is that I do rather prefere to "superimpose" small changes instead of heavily change the default templates, whenever possible.

 

[Mike]

If you add the "clear:both" statement it is not detrimental of the working of the messageMeta div-block (did test it). This is true for 16:9 screens as well as 4:3 screens.

It is detrimental though - you can see this easily with short messages in the kitchen sink style here. It will move the info to a different location. It doesn't come up on the default style that much because of the min-height, but without that it's quite noticeable.

Regardless, this is exactly what style properties are for - you're not even editing a template to add the clear:both, you're just adding it to the property. Alternatively, you can just add it to extra.css. It seems like this change comes from a fairly drastic change, so it makes more sense to add it with your other changes.

 

[Garani]

I see.

Oh well, fair enough. I am using my css dedicated to the changes, and I have added the clear:both just there.

It is a real beauty to work with your code, though. Things are clear and understandable. This is not such a given in the programming world.

Keep up the good work!