CODEWITHSUNDEEP
css
BruceyBandit
BruceyBandit

Reputation: 4324

I want to remove something using css

I have a slight CSS problem I cannot figure out. If you look in the row next to the word "Answer", it shows a little black rectange, (it is actually 5 little squares but you prbably can't see it clearly). I believe these are borders but I cannot get rid of it. Does anyone know how to get rid of it?

code is here in jsfiddle

Upvotes: 0

Views: 271

Answers (4)

Gchtr
Gchtr

Reputation: 2794

The little black rectangle is the border of the cells of an extra table nested inside the cell. Remove the borders from those cells.

You could add the following to your css:

#optionAndAnswer td table td {
    border: 0px;   
}

Upvotes: 4

Luca
Luca

Reputation: 1100

Actually the black square is a nested empty table that inherits the black border of td and th. You can easily test it adding this simple css rule:

td td, td th { border: 1px solid red!important; }

Upvotes: 0

Jasper
Jasper

Reputation: 75993

It is a table full of hidden inputs. If you add style="display:false;" to the <table> tag it will not display those lines:

<table style="display:none">
<tbody><tr>
<td>
<input type="button" onclick="btnclick(this);" value="A" id="answerA" name="answerAName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="B" id="answerB" name="answerBName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="C" id="answerC" name="answerCName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="D" id="answerD" name="answerDName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="E" id="answerE" name="answerEName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="F" id="answerF" name="answerFName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="G" id="answerG" name="answerGName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="H" id="answerH" name="answerHName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="I" id="answerI" name="answerIName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="J" id="answerJ" name="answerJName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="K" id="answerK" name="answerKName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="L" id="answerL" name="answerLName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="M" id="answerM" name="answerMName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="N" id="answerN" name="answerNName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="O" id="answerO" name="answerOName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="P" id="answerP" name="answerPName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Q" id="answerQ" name="answerQName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="R" id="answerR" name="answerRName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="S" id="answerS" name="answerSName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="T" id="answerT" name="answerTName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="U" id="answerU" name="answerUName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="V" id="answerV" name="answerVName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="W" id="answerW" name="answerWName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="X" id="answerX" name="answerXName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Y" id="answerY" name="answerYName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Z" id="answerZ" name="answerZName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="True" id="answerTrue" name="answerTrueName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="False" id="answerFalse" name="answerFalseName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Yes" id="answerYes" name="answerYesName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="No" id="answerNo" name="answerNoName" class="answerBtns">
</td>
</tr>
</tbody></table>

Here is an updated version of your jsfiddle: http://jsfiddle.net/pSy97/9/

Upvotes: 0

Sebastian Oberste-Vorth
Sebastian Oberste-Vorth

Reputation: 999

For some reason, you included a table in there. And the table has borders... 

<td>
  <table>...</table>
</td>

so I would suggest get rid of the table in this td.

Upvotes: 0

Related Questions