HTML/JS/CSS 자체가 커지는 문제

Question

http://img175.imageshack.us/img175/4295/tableissue.png http://img175.imageshack.us/img175/4295/tableissue.png

다음 그림이 그 예입니다.

나는이 체크 박스를 체크한다. 체크 할 때 jQuery 토글(); 그것은 사진의 첫 번째 절반 (#writeComment)에서 볼 수있는 숨기고 #SCtryVOTE (다른 절반 그림에서 볼 수있는 것, 오른쪽)를 보여줍니다.

지금은 이유가 무엇인지 알지 못합니다. 왜 확인했는지, 왜 잘 모르는 지, 그것이있는 것보다 더 많은 장소가 필요하기 때문입니까? 검사를 할 때 문제없이이 작업을 어떻게 수행합니까?

다음

하는 코딩 것 :

$('#tryout').click(function() { 

    $('#writeComment').toggle(!$(this).attr('checked')); 

    $('#SCtryVOTE').toggle($(this).attr('checked')); 
}); 

JS의 JQuery와 스크립트 부분을,을 heres 테이블 및 div의 HTML 부분 :

<input type="checkbox" id="tryout"> 
<table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> 
<tr style="background: #686868;"> 
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> 
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> 
</td> 
</tr> 
<tr> 
<td align="left" valign="top" width="70" height="112" style=""> 
TEST 
</td> 
<td align="left" valign="top" width="70" height="112" style=""> 
<div id="writeComment"> 
Smid en kommentar:<br> 
<form action="javascript:DoInsert()" method="post"> 
<textarea id="kommentar" name="kommentar"></textarea><br /> 
<input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>"> 
<input type="submit" name="Submit" value="Sæt ind!"> 
</form> 
</div> 

<div id="SCtryVOTE" style="display: none;"> 
<form onsubmit="if (!this.comment.cleared) clearContents(document.getElementById('comment')); return true;" action="javascript:DoSCInsert()" method="post"> 
<textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea> 
<br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input> Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input> 
<input type="submit" id="SCstem" name="Submit" value="Stem!"> 
</form> 
</div> 

어쩌면이 두 상자를 위해 너무 CSS 부분이 필요합니다

#writeComment{ 
position: relative; 
left: 5px; 
top: 10px; 
} 
#SCtryVOTE{ 
position: relative; 
left: 5px; 
top: 10px; 
} 

Answer 1

첫 번째 양식의 <textarea>에 크기가 지정되어 있지 않습니다. d 초의 텍스트 영역은 rows=""과 cols=""으로 지정됩니다.

또한 수직 오프셋이 증가한 것은 첫 번째 양식을 숨기는 방법 때문일 수 있습니다. 그 스크립트 코드도 게시 할 수 있습니까?

Answer 2

우리는 형식

재 코멘트 캔트 이후 : 난 당신이 코딩의 이해 해달라고하는 부분이 수행해야하며, 내가 할 수있는 최선을 설명하려고 곳 @Franci Penov 캔트 볼 - Azzyh 1 분 전

예 : </td>을 쉽게 볼 수있는 것은 어느 것입니까?

들여 쓰기되지 않은 (원래 코드)

<table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> 
<tr style="background: #686868;"> 
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> 
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> 
</td> 
</tr> 

들여

<table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> 
    <tr style="background: #686868;"> 
     <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;"> 
      Opret 
     </td> 
     <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;"> 
      Opret 
     </td> 
     </td> 
    </tr>