Menu
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?
<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>
759
You can do that by adding a pseudo element to the quantity element. Show activity on this post. If you simply want to draw a line on the element, this could be of use to you.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
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;"> </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"> </span> and this is green box: <span class="box2"> </span>.
And this is another box, this time it is blue: <span class="box3"> </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.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
