Comment Moderation and inline-block

In my never ending battle with spam I (in my overzealous way of thinking) accidently set things up so that after an entry is 1 day (!!!) old it would force comment moderation. Well, as you can imagine this is extremely annoying and has been fixed to be a little more lenient. SO….Ocomment away.

I’ve also promised all of you that I would post some information on the inline-block css display attribute. Read on.

I don’t know if any of you have ever tried centering a group of left-aligned block tags before, but if you are just using the standard css methods it is absolutely impossible. I set out to fix this problem for a charity site I was working on and was terribly shocked. For the first time in recent history IE supported a css attribute that was standardized and Mozilla did not. This attribute is a display attribute called inline-block. Now why mozilla doesn’t support this I do not know. It was rolled out in the CSS2 spec and in my mind is a fairly important thing to have implemented.

Basically what it does is it treat’s the element that it’s applied to as if it where an inline element when the document flow is created. Basically that just means that if you were to apply this to a div, the div would pretty much act like an image. Now you might be saying, so what’s the difference between this and inline? Well, unlike the inline display type inline-block will basically treat the contents of the tag and the physical attributes of the tag as though it were a block level tag. This means you can apply widths, borders, heights, as well as including other block level elements within the tag.

On of the caveats of this that I am somewhat miffed at IE for is that this doesn’t seems to work with elements that are block level by default. So I usually use it on span tags. So, if you have three span tags that are to include block-level content (like in this example an image and a p tag. You could use the following code:

<html>
<head>
<style type="text/css">
body {
  text-align: center;
  background-color: #ccc;
}
.inlineblock {
  display: inline-block;
  text-align: center;
  font-family: Verdana;
  font-size: 10px;
  color: #fff;
  background-color: #003366;
  height: 100px;
  width: 100px;
}
</style>
</head>
<body style="text-align: center;">
 <span class="inlineblock"><p>Test Block 1</p><img alt="placeholder" /></span>
 <span class="inlineblock"><p>Test Block 2</p><img alt="placeholder" /></span>
 <span class="inlineblock"><p>Test Block 3</p><img alt="placeholder" /></span>
</body>
</html>

Now, this unfortunately does not work at all in mozilla browsers. Nor is there any way (I know of) to perfectly mimic this. I have tried using negative margins before but the problem with that is it forces all of the elements to be on the same line which will usually result in scroll bars on low resolution computers. The inline-block property however will cause the next element to wrap around if the browser runs out of room.

So, hopefully mozilla will have this implemented soon. Heck, I might even dust off my old C skills and see if I can lend them a hand.

One thought on “Comment Moderation and inline-block”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">