There is a lot of posts on the net advising a couple of solutions but nothing works in my case, I suspect it is due to the surrounding code but I cannot figure out what.
Toggling visibility works very well and the script works with 2 "submit" but renders correctly (as intended) only with one "submit" button. The 2 "submits" (lines 27, 28) do not render on the same line or within the block (as I want) no matter what I do (there is 4 lines within which they can both render).
There is hundreds of lines of
Quote:
|
'class"correctit" id="nnnn"
|
in this html document in one single HTML FORM. Each of these lines is a block element (<h2><h3><p> or similar) and need 2 submit buttons to be presented as a "wiki" as intended by code below. One "submit" is to submit a correction while the second submit is to report vandalism or similar. In this testing script href is to "#top" but will be to "#0001" (or incremental number) when it works.
Code:
1 <!DOCTYPE ....><html><head><title><link rel=stylesheet type="text/css" href="css.css">
2 <script type="text/javascript">
3 function toggle_visibility(id) {
4 var e = document.getElementById(id);
5 if(e.style.display == 'none')
6 e.style.display = 'block';
7 else
8 e.style.display = 'none';
9 }
10 </script>
11
12 </head><body><form method="post" action="cgi-bin/correct_line.cgi">
13
14 <div class="ven"><a name="top"></a>
15 <div>
16 <span class="hh2">
17 This is one description.
18 </span><span class="correctit"><a href="#top" name="top" onclick="toggle_visibility('0001');">mauvais?</a>
19 </span><br>
20
21 <span class="correctit" id="0001" style="display:none;">
22 En anglais: This is the description.<br><br>
23 Traduction correcte en francais:
24 <p>
25 <textarea class="watsleft" placeholder="Certaines instructions." name="0001" rows="1" cols="80">
26 </textarea>
27 <!-- <input type="submit" value="Rapporter?"> -->
28 <input type="submit" value="Changez">
29 </p>
30 </span>
31 </div>
32
33 more of the same
34
35 </div></form>
36
37 and here is the css code
38
Code:
.correct_submit {
39 /* display:inline;*/
40 display:table-cell;
41 text-align : left;
42 }
43
44 .watsleft {
45 /* width:80; */
46 width: auto;
47 text-align : left;
48 overflow: auto; /* no scroll for IE */
49 }
50
51 .correctit {
52 width: 100;
53 color: #2F4F4F;
54 background: #CCFFFF;
55 margin-left : 0px;
56 font-size: 10px;
57 }
58
59 .hh2 {
60 border : none;
61 margin-left : 12px;
62 margin-right : 4px;
63 text-align : left;
64 color: green;
65 font-size: 24px; /* size is equal to <h2> */
66 }
Can anyone make a suggestion?
Thank you for your help.
