Problem with inline-block

In my news articles, <q> is styled with 'inline-block', I need it that way so it doesn't add a line break below it unless I want one. All my articles have a small thumbnail image associated with it and that is where a conflict happens. The thumbnail is meant to embed into the text but when there is a <q> section, it fails to embed in the text and just makes a gap in the article.

You can see the big gap below the first sentence here.

Is there any way around this?

 

A class, that zeros the paddings and margin should do. If it is not the block, that costs the problem, it should be something above or bellow,

 

For <q> to be 'block' and still not have that annoying line break, I had to set the margin-bottom to -15px. That unfortunately screwed up a few things.

So I'm still looking for a resolution.

 

Please can someone help?

 

Yer double space might possibly be from that <br /><br /> huh?

<q> is an inline element. Normally it would never give you a newline. It is meant for inline quotes like this:

<p><q>I thought I was a magician, Spencer</q> said Fed Reserve Chairman Ben Bernanke. Bernanke quit in disgust at his <q>mere humanity</q> and hid from Alan Greenspan in shame.</p>

What you need is BLOCKQUOTE.

<p>Andy Murray eased into the second round in Rotterdam with a 6-3 6-2 victory over Croatia's Ivan Ljubicic.</p>

<blockquote><p>"I lost against Ivan two times out of three so I was expecting a difficult match.</p>
<p>He normally serves very, very well but tonight I didn't think he served his best, which made it a bit easier for me.</p>
<p>There weren't too many rallies, there were a lot of mistakes but it was very tough to see out here. I'm happy to come through reasonably quickly."</p></blockquote>

<p>Murray will now play Andreas Seppi on Thursday.</p>

<blockquote><p>"I lost against him the only time I played him.</p>

<p>He played well here last year, he beat Nadal. But if I play like I did today I have a good chance."</p></blockquote>

Code (markup):

Blockquote is used for large, quoted text which has several sentences. It requires a block as a direct child (p works well) and from then on you can do what you want with it. You could also add the "cite" attribute to it and stick the player's name in it or a url to the quote's reference, but I doubt any usser agents make use of that.

The quote image should be a background image anyway. I would make it a background on the blockquote itself. The p can do all the side margins and whatever.

 

Thanks for your time on this but my articles are sourced from SMF forum threads which does not use <p> tags.

So back to my main issue:

1) Can I have an image embed into div of text that has display set as inline-block?

If not or alternatively,

2) How do I stop a block element of forcing a gap below it when the margin is set to 0? See here: http://www.murraysworld.com/test.php

 

Since I don't use br's for decorative spacing (what CSS was invented for) I'd first try to see WHO has that extra space... first, for testing, remove the br's entirely and give each separate element a different ugly background colour. Then you can see if someone has bottom-padding or something.

The image I still think should be a background image:

blockquote {
background: url(thequoteimage.gif) 0 0 no-repeat;
}

or whatever works re positioning of the bg image. I mean, that eliminates the need to add it into the HTML, and it'll appear with every single blockquote that you have.

If you want to do this with q you can, if you set it to block.

Mostly because,
FF2 and under, K-Meleon and other older Geckos die horrible deaths with display: inline-block;

IE uses it for something completely different: triggering haslayout on blocks, or with something naturally inline like a q it will indeed do inline-block correctly.

Inline-block makes things act like inlines (don't make newlines, wrap like text, etc) but like blocks are allowed to have a height and a width, vertical margins, all that other good stuff. See, if you kept the q as an inline element (inside a p preferably) it wouldn't have any vertical margins anyway.

 

As explained earlier, double BRs are always needed straight after the block element due to SMF being the CMS and therefore I believe inline-block is my only option.

 

Have you considered you're using the wrong platform for your purpose? Or, open the file and modify the template's output.

As discussed elsewhere, trying to repair a poor script with improper markup and presentation rules is a royal PITA. Change platforms or fix the one you have.

cheers,

gary

 

It seems most forums have double BRs instead of Ps and considering I want my CMS to be using my forum then there is no point moving.

 

As ds pointed out, that many do the wrong thing does not make it right.

If you want to keep a poor choice in platforms, then ds also gave you a dirty css patch that will cleanup the rendering if only you correct your poor choice of markup.

gary

 

Yes exactly, this thread was over and then you said I should change platform, just letting you know that isn't a sensible thing to do in my circumstances.