Why a gap below block element?

Why is there a gap below a block element that is set to 0 margin? Please can you read the text on the test page.

http://tinyurl.com/conmmf

 

Because there are two

<br /><br />

HTML:

after the block element.

 

No, the two <br />'s are not responsible for the large gap.

There are two <br />'s above and below the element and yet the gap below is twice as big as above.

 

because you use block for the span it forces an additional line break

 

so why are you asking? its obvious you know its not the correct way to markup that section. Think its fair enough, you use BRs to denote paragraph breaks, you should get screwy results.

 

So is there a way to avoid the additional line break for block elements?

It has nothing to do with BRs and using BRs instead of Ps does not cause any validation problems for my XHTML. It should be noted that this forum uses it and my forum software uses BRs instead of Ps as well.

 

oh no, you come on. Yes, it makes it wrong even if this forum does it. Furthermore, I did a search on the source for this page, guess what? Nowhere do they use double BRs.

Really, your stuck with them eh? Ever hear of a regex? post processing? And I'm pretty sure SMF isn't doing what you presented above. If it is, you need to wrap each call to the SMF source with a DIV per returned element.

See you have inline content : block element : inline content . 1. by putting the block element in the middle you shouldn't need either of those BRs. Assign your own margin. 2. What's the rationale behind not using P tags for all 3 sections? Use of the SPAN is wrong, since you declared it a block element, it should have been a DIV. Which is silly, why use a SPAN and then go write up a CSS rule for it when if you used the correct element there wouldn't be any additional markup required?
And as an added bonus: you get predictable behavior from your code. Order today!

 

Wrong, they use double BRs after every section of text that would ideally be put in <p> tags. That is the same for most forum software if not all.

<div id="post_message_10990151">oh no, you come on. Yes, it makes it wrong even if this forum does it. Furthermore, I did a search on the source for this page, guess what? Nowhere do they use double BRs. <br>
<br>

Code (markup):

 

"Yes, it makes it wrong even if this forum does it."
And you will note, they don't sandwich a SPAN defined as a block element between them(maybe SMF does, who cares). Matter of fact, they only use those BRs inside of block elements. Why don't you follow what the forum does, its obvious they have figured out a way to use bad code.

 

You are making the span display:block; - that forces to a new line because block elements default to 100% width and force in-flow text to the line below it.. Two newlines after a new line == three newlines, one more than the two before it. That is the correct behavior for what you have done code-wise.

NOT that you should be using double breaks in the first place between text elements, that's what paragraphs are for... Double breaks are usually an indication of doing something wrong. Kind of like that STRONG before it should probably be a heading tag.

If you really want that 'block' to behave as inline content, might I suggest this:

	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;

Code (markup):

Instead... the first two lines shouldn't be neccessary anymore given FF3 has inline-block, but it's still buggy AND a lot of forked gecko based browsers are still on the previous rendering engine, so it's better to include those as well. Will let you state widths, heights, borders, etc while at the same time acting as a 'run-in' so you have do declare your newlines manually.

 

The problem with inline-block is you can't have images embedded in the text like you can with block. That's a major problem for me

 

Where would you get that idea? See Inline-block Gallery.

cheers,

gary

 

Uhm... since when?

 

This is an example... the right image fails to embed into the text (inline-block element). Instead, it causes an ugly gap in the article. When that text is inside a block element the image embeds perfectly.

 

Read up on how block and inline elements react to float elements. An inline element tries to wrap the float, but you made a block that acts inline. But a block is rectangular, and cannot wrap.

You could put the floated image inside the inline-block, but the real question is why would you have that inline-block to begin with? It appears it should be a blockquote semantically. If it were, the block would go under the float, and the text would wrap as desired.

It is very difficult to get things working right if the initial structure and semantic values are not right.

cheers,

gary

 

I'd expand that further, read up on what HTML/CSS are and how to actually use them...

This might be a good start in terms of things to fix:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Mein gott, the code for those pages are filled with some real whiskey tango foxtrot oddities... It's like a laundry list of how not to write code.

<!-- Header -->
<head>

and

</head>
<!-- /Header -->

You're kidding me, right? Gets worse from there - here's some tips - if you have to nest 4 div's deep just for a single flat header, you're probably doing something wrong. If you have to resort to a table that only has one TD for each TR, you are probably doing something wrong. If you need to use &nbsp; for spacing out a menu - and that menu is not inside a list tag of some sort, you are probably doing something wrong. If all your tags inside a container have the exact same class on them, and that container has a class already, you are probably doing something wrong. If you need to add a div just to add space between other div's, you are REALLY doing something wrong.

As Gary suggested, you need to go back and learn the difference between inline and block, learn how floats work, and I'd expand that to going back to learn SEMANTIC HTML, instead of the hodge-podge of nonsense you have now.... as evidenced by all those double breaks for what should be paragraphs, some of which should be in blockquotes.

NOT that the hodge-podge is entirely your fault - I recognize the telltales of some sort of CMS, and 90% of CMS templates tend to be complete rubbish because they are written by people who use off the shelf CMS systems BECAUSE they don't know how to do it themselves.

Well, that and 80%+ of the advice, 90%+ of the books, 99%+ of the education on the subject of HTML/CSS is either a decade out of date or just plain wrong.

 

Guys, I know my code isn't good, I don't need a lecture on it - it does the job and displays fine in the major browsers, for now that is the important thing.

I came here to ask how to get text embedded into a inline-block and have already explained why I need to use an inline-block, it's due to SMF because they don't use <p> tags, it's not due to me. Although, for the record I don't think there is anything majorly wrong with double <br> over <p>, yes it isn't perfect HTML but it's not invalid HTML and does the job fine almost all of the time.

So... is it actually possible for me to get that image embedded into the inline-block as if the text was a block without putting the image inside the div?

 

You do not need to style that div as inline-block. Period. Why do you think you should? Especially since with your present structure, it breaks your desired rendering.

gary

 

I do need to style it inline-block. The articles are taken from SMF which means double <br>s are used instead of <p>. That means an additional line break is added below a block element that has a double <br> below it even when the margin is set to 0. The only way around it so far is inline-block.

 

Wait - you're using a forum software as a cms?

Oh, I have an idea - what are your line-heights set to? If your spans are always going to be followed by double breaks, add a negative margin-bottom to it equal to your line-height and make it display:block; - that would effectively remove the extra space... though if you do not include the double break it could cause some wierd layout issues.

Another possibility might be to parse it server side looking for </span></br></br> and use a regexp to change that to </span></br> on the fly.