View Full Version : Line-break html problem - line becomes h1

Jul 4th, 2009, 04:23 PM
I'm trying to make so that a "posted by Username at Date" will appear straight underneath a heading (h1), on the next line, but using this form it always skips past a line, and then places the 'posted by'. The line height is also far too big when it does this, being in h1, and it doesn't look good. I've tried setting the line-height of h1 down, but if I do this and the heading goes over two lines, it will be far too small.

Here is the code of the news form I'm using;

<h1 class="entry-title"><txp:permlink><txp:title /></txp:permlink></h1>
<txp:else />
<h1 class="entry-title"><txp:permlink><txp:title /></txp:permlink></h1>
<p class="published">Posted <txp:posted /> by <span class="fn"><txp:author /></span></p>

<div class="entry-content">
<txp:body />

<p class="tags"><txp:category1 title="1" link="1" />, <txp:category2 title="1" link="1" /></p>

<txp:comments_invite wraptag="p" />

<div class="divider"><img src="<txp:site_url />images/1.gif" width="400" height="1" alt="---" title="" /></div>

Here you can see it in action;

Do you see the big gap between the heading and the "posted by"? Probably a simple task this, but I can't for the life of me figure it out.

Any suggestions? :)

Jul 4th, 2009, 05:06 PM
Headlines and paragraphs have a default top and bottom margin which you can/need to set to zero in your stylesheet.
On another note I’d suggest using a div rather than a paragraph element for the “posted” stuff since this is not a paragraph and such an element would be semantically (http://boagworld.com/technology/semantic_code_what_why_how/) wrong. Hence you’d only need to set the bottom margin of the h1 to zero.

Jul 4th, 2009, 05:38 PM
Thanks man! Didn't know about a default margin on it, strange that they have that. But many thanks, man. :)

Jul 4th, 2009, 06:22 PM
It’s not strange that they have that, it’s totally logical. HTML was originally invented to mark up scientific documents (i. e. text) and therefore people were supposed to distinguish headlines from regular text, and paragraphs are supposed to have some space in between them so they aren’t just one huge block of text, etc. So, if you don’t apply a stylesheet at least some default styling must be shown. The font size and font weight that you see in headlines are some of those default styles as well as the margins (although you can’t directly see them). The list bullets are also default styles to make a list actually look like a list so people can distinguish it. And lists have a default top and bottom margin, too, by the way.

So, whenever you see some space between two elements check for margins or paddings. Firebug (http://getfirebug.com/) does help tremendously since you can investigate the source code on the fly.

Jul 4th, 2009, 07:58 PM
Yeah, of course you're right, man, it does make sense, I guess. I have Firebug, and have had some use of it, but I can't always figure things out just by using that.