current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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!

share|improve this question
 
display: inline-block; seems to work for me: jsfiddle.net/xEtEK/2 in Chrome/Mac. What browser are you using? –  millimoose Oct 25 '11 at 19:55
add comment

7 Answers

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

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

share|improve this answer
 
You shouldn't be using <p> inside of a <div>, as that might cause unexpected results in different browsers (the code is invalid as <p> is not permitted to contain any block-level elements). –  Second Rikudo Oct 25 '11 at 20:06
 
Since when is using a <p> inside a <div> a bad thing? Also, I am not using a <p> inside a <div> and finally I was just modifying the CSS portion of his original code. –  jessegavin Oct 25 '11 at 20:18
1  
It's the other way around; <div> inside <p> is invalid html. –  marissa.c Oct 25 '11 at 22:34
 
thanks. combined with @Inerdia's comment, i got it working. thanks. i often forget to use good ol' &nbsp instead of empty space. –  WhiteRau Oct 26 '11 at 11:11
 
@jessegavin yes, I meant it the other way around, sorry about that :P –  Second Rikudo Oct 26 '11 at 19:51
add comment
up vote 0 down vote

inline-block is the display you need for this.

share|improve this answer
1  
Didn't WhiteRau say that didn't work? –  jball Oct 25 '11 at 19:54
1  
"inline-block is useless` –  Second Rikudo Oct 25 '11 at 19:54
 
Hopefully WhiteRau will explain why it didn't work, since it's what I've always used for this kind of situation (inline box of defined width/height) and it's always worked for me. –  Niet the Dark Absol Oct 25 '11 at 19:55
 
And works in this case (see my comment on the question) – so I'm guessing the problem is somewhere else. –  millimoose Oct 25 '11 at 19:56
 
@Truth there have been many times when I make unorderlist navigation I have to use inline-block. Very useful. –  Howdy_McGee Oct 25 '11 at 20:04
show 1 more comment
up vote 0 down vote

Your browser might be persnickety about empty elements. Try adding a &nbsp; into the <div>.

share|improve this answer
 
YUP. that's why the inline-block didn't work. for me, at least... –  WhiteRau Oct 26 '11 at 11:10
add comment
up vote 0 down vote

<div> is not allowed inside of <p> elements (which doesn't allow any block-level elements inside of it).

See this example

In this example, I've used display: inline-block; and changed the <p> element into a <div>.

share|improve this answer
add comment
up vote 0 down vote

There's many ways to do it, one of which is this

share|improve this answer
add comment
up vote 0 down vote

Just to make sure - did you put the .checkbox selector inside a <style> tag in the actual HTML?

<style type="text/css">
    .checkbox { border: 1px solid black; width: 10px; height: 10px; }
</style>
share|improve this answer
add comment
up vote 0 down vote

1) Get rid of the <p> elements

2) Add float: left to your .checkbox style

3) Add &nbsp; after the div or a padding: right to the div block to make it look better

4) Add li { list-style-type: none; } in your style block

5) Play around with vertical-align in your .checkbox style until you're happy

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.