Question

here’s the code (and, yes, i’m using a basic reset.css):

.checkbox { border: 1px solid black; width: 10px; height: 10px; }

<ul>
    <li>
        <p><div class="checkbox"></div>I will!</p>
    </li>
    <li>
        <p><div class="checkbox"></div>I won't!</p>
    </li>
</ul>

you can see what i’m trying to do. essentially create a checkbox. the reason i’m NOT using a checkbox tag is because i have to export this thing to PDF so that it can be printed and hamfisted bogots can drag their X mark through the box. if i use the checkbox tag, it’s too small. if i use and image, PDF doesn’t line up right.

so. i need the CSS box to line up as expected. what am i missing? i’ve tried changing the div to display: inline; but it freakin’ disappears! inline-block useless.

i tried like mad to search this one out, but to no avail, so if this showed up somewhere else, apologies.

WR!

Answer 1

.checkbox { 
    border: 1px solid black; 
    width: .65em; 
    height: .65em; 
    display: inline-block;
    margin-right: 4px;
}

See it working here: http://jsfiddle.net/ZeaLM/