Drawing empty inline boxes in CSS?

Question

I'm sure this is very simple, but I'm trying to draw a set of small, empty, inline boxes in HTML like the following:

<span style="border:1px solid black;height=10px;width=17px"></span>

Earlier, did simple .gif images earlier but looked fuzzy as the browsers' displays are scaled up or down.

<span> however being an inline element does not honor the height and width properties. And of course using <div style="display:inline;... exhibits the same behavior in that it then won't honor those properties.

Can you please suggest a CSS'y way?

---

Update Assume the following, if I float it it will bond to the right or left of the text and I need it inlined to the text based upon the browser's width, &c

<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing 
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

Planoconvex

What is wrong with block elements? And where is the gif in your code? – Brandie

Oh, you mean "Earlier, did simple .gif images..." again, not sure why you can't use block elements, perhaps update your question with this information. – Brandie

Can't you just use block elements and float right? – Ararat

Setting it as block and float right puts it at the far right of the current element, not inline with the rest of text. – Invigorate

How about float left? (Maybe I'm not understanding what you're trying to do....) – Ararat

Answer 1

height and width can only be applied to elements with hasLayout property. SPAN element by default does not implement this property.

Because inline-block does not work correctly on all major browsers I would recommend using padding-dimension trick:

<span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span>

You might need to play a little bit with dimensions because global font-size, font-family and line-height can affect the real size of your box.

Edit: Drawing empty boxes is the bit I missed, but I think it is quite obvious from my code anyway. If not, this is another example:

<style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>

This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>.
And this is another box, this time it is blue: <span class="box3">&nbsp;</span>.

And this code produces this as an output: alt text http://img413.imageshack.us/img413/5865/boxes.png

And because we put   inside every span, this trick will work on all browsers.

Ibadan

Answer 2

You could try out the css display parameter inline-block. But your mileage my vary with this one.

display: inline-block

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Rafaelita

for IE compatability only use inline-block on inline tags (ie. span) IE ignores inline-block for divs – Spurling

Answer 3

Other people's answers have included the correct inline style syntax, but I thought I'd point it out explicitly:

Your original style rules look like this:

    <span style="border:1px solid black;height=10px;width=17px"></span>

That should look like this:

    <span style="border:1px solid black;height:10px;width:17px"></span>

The equals signs don't belong in css syntax like that, colons are what is needed there.

That, along with display:inline-block on the span, as other people suggested, worked for me. Like this:

    <span style="border:1px solid black;height:10px;width:17px;display:inline-block;"></span>

Westonwestover

Answer 4

You could use display: inline-block. Though this won't work in old browsers like IE 6.

Depending on where you want the items located, you could do display:block; float:[left or right]

Ironworker

Quote from quirks mode: "IE 6/7 accepts the value only on elements with a natural display: inline." – Rafaelita

Answer 5

Lots of good suggestions on this page. I'm wondering, though, when you tried using a GIF, was the border part of your graphic?

How about using a transparent 1x1 gif that you can size with CSS, then apply border:1px solid black to the image. If you tried incorporating the border as part of the image, I understand stretching it would cause it to look fuzzy. But a transparent GIF with a CSS border should look nice enough, unless you had some other styling you needed on it...

Good luck!

Cease

Answer 6

You are right, span does not honour width and height, however, it does sort of honour padding.

You can set the width of your box easily giving it a left and / or right padding.

The height is a bit trickier as an empty span seems to have a height so you need to set the font-size to 0.

span.box {
    padding: 5px 8px;    // height 10, width 16
    font-size: 0px;
}

And of course it does not work in IE7 (and probably IE6), at least in IE7 compatibility mode the box magically disappears when it's empty and doesn't show the bottom border when I put a non-breaking space in it (which messes up the width anyway)...

Harmless

span ignores width and height as it's meant to be used for inline content and having height and width would throw this out, display:inline-block will allow width and height to be used, but only on inline tags in IE – Spurling

Answer 7

I believe this works.

 <span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>

pretty sure that'll work cross-browser

Spurling

Answer 8

It seems that width: 17px doesn't work on inline or inline-block elements. But in turn why not make tricks on block elements and let them shows as inline elements via float: left?

This is what I have tried:

<html>
<head>
<style>
.container div {
    float: left;
    height: 20px;
}
</style>
</head>
<body>
<div class='container'>
    <div style='width: 20px; border: 1px solid red;'></div>
    <div>Text</div>
    <div style='width: 20px; border: 1px solid red;'></div>
</div>
<div style='clear: both'></div>

Motch

Answer 9

Don't quite understand your update, but in general to draw a set of small, empty, inline boxes in HTML a table would be the easiest method so I'll leave this here incase it helps.

Simply define the table ...

   <table>
       <tr>
           <td id=one></td><td id=two></td><td id=three></td>
       </tr>
   </table>

Then format the table data using your .css like so ...

    tr{  height: 60px;}
    th, td{ width: 100px;}
    #one{   border:10px solid blue;}
    #two{   border:10px solid red;}
    #three{ border:10px solid green;} 

Depending one how you want the text positioned, un-formatted table cells might be appropriate as well. Hope this helps.

Permanency

Answer 10

How about

<div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <br style="clear: both;" />
</div>

Thunderbolt

On FF, that just draws small boxes ~1x1 to the far left of the current line? – Invigorate

"far left": depends where you place the container. "1x1": probably inherited from your other stylesheet rules, try to play with it dynamically (using firebug.) – Thunderbolt