I have the following html cells as part of a table and i am trying to apply a background to these cells however it is not working, the same class is working on normal text but not the cells. what am i doin wrong? .question { background-color: #7d98b3; } <table> <div class="question"> <tr> <td colspan="2"><label><strong>1. I make important decisions based on:</strong></label></td> </tr> <tr> <td><input type="text" name="1_1" id="1_1" maxlength="1" size="4" /></td> <td><label for="1_1">Gut level feelings</label></td> </tr> <tr> <td><input type="text" name="1_2" id="1_2" maxlength="1" size="4" /></td> <td><label for="1_2">Which way sounds best</label></td> </tr> <tr> <td><input type="text" name="1_3" id="1_3" maxlength="1" size="4" /></td> <td><label for="1_3">What looks best to me</label></td> </tr> <tr> <td><input type="text" name="1_4" id="1_4" maxlength="1" size="4" /></td> <td><label for="1_4">Precise review and study of the issues</label></td> </tr> <tr><td colspan="2" /> </tr> </div> Code (markup):
it should work if you put the question class on your actual cells instead of the div containing the table. <table> <div><!--took the question class off of your div, and put it as a td class.--> <tr> <td colspan="2" class="question"><label><strong>1. I make important decisions based on:</strong></label></td> </tr> <tr> <td class="question"><input type="text" name="1_1" id="1_1" maxlength="1" size="4" /></td> <td class="question"><label for="1_1">Gut level feelings</label></td> </tr> <tr> <td><input type="text" name="1_2" id="1_2" maxlength="1" size="4" /></td> <td><label for="1_2">Which way sounds best</label></td> </tr> <tr> <td class="question"><input type="text" name="1_3" id="1_3" maxlength="1" size="4" /></td> <td class="question"><label for="1_3">What looks best to me</label></td> </tr> <tr> <td class="question"><input type="text" name="1_4" id="1_4" maxlength="1" size="4" /></td> <td class="question"><label for="1_4">Precise review and study of the issues</label></td> </tr> <tr><td colspan="2" /> </tr> </div> HTML: im not an expert, but this is what i would try, if it doesn't work, then i hope a guru can point you in the right direction.
ok i inserted them in the <td> tags and it worked but now i have white margins around each row while i want the whole 5 rows to have a grey background for example, how can i achieve that? thanks
post a link to your site? i can work on it in real time and see what works, then tell you waht to change. also, try setting your .question class to margin:0; padding:0; before anything, but i would still like to have a look at your page.
Instead of adding the same class to each td, give the class to the table, remove the div (unless it's doing something??) and then table.question td { background-color: #7d98b3; } Whenever every single child of an element has the same class, there's usually another way to do it. What Homer said, post a link to either the site or some working demo so we can see what's going on... do you have border-collapse: collapse on the table? *edit all that said, this looks like a form, so not sure why it's in a table : )
stomme, he is using one table and wants some calls to be gray and some to be white, so he would need two classes, and still define the class in the <tr> tag. i think the reason is because the border of the table is still there, even though its invisible, so it pushes the <td>'s away from each other a little bit. unless you give your whole table a background i dont think you can do it any other way.
ok Stomme poes mentioned that i shouldnt be using tables, I am using this form to practice and learn css so would be interested in links showing why i should use css instead of a table for forms and how to do it, thanks. The whole point of making some rows a different colour is to make the form more readable so i wanted evey other question to be different and so provide some contrast, ive seen this effect used in some sites and I think it improves readability.
you can use <ul> and <li> im pretty sure, stomme may be able to back me up on this. im not sure exactly how you would go about doing it, but it can be done, or you could use seperate divs for each row (that would mean alot of divs though)
Ok, first off you cannot place a DIV there, that's invalid markup. There are only a handful of valid tags that can come immediately after <table>, and that's <caption>, <tbody>, <thead>, <tfoot>, <tr> or </table> Your first label in the double-width span doesn't seem to actually BE a label, but a header. If using a table (which isn't entirely appropriate) that should probably be a TH. As to your style, if you want to wrap the entire table contents, you either put the div AROUND the table, or style the table directly. Since all your inputs are the same size, I'd axe the table outright and go thus: <div class="question"> <h2>1. I make important decisions based on:</h2> <label for="1_1"> <input type="text" name="1_1" id="1_1" maxlength="1" size="4" /> Gut level feelings </label><br /> <label for="1_2"> <input type="text" name="1_2" id="1_2" maxlength="1" size="4" /> Which way sounds best </label><br /> <label for="1_3"> <input type="text" name="1_3" id="1_3" maxlength="1" size="4" /> What looks best to me</label> </label><br /> <label for="1_4"> <input type="text" name="1_4" id="1_4" maxlength="1" size="4" /> Precise review and study of the issues </label> <!-- .question --></div> Code (markup): If I wanted more space after the inputs, I'd just add a margin to them as: .question input { margin-right:8px; } I might even consider axing the line-breaks and making the labels display:block, but that would look stupid when javascript is off. I like wrapping the inputs in their labels, but that really hinges on if you want borders and where you want them.