[HTML] Probleme mit dem Design-Code / Probleme mit dem Tabellencode

KinoKarte

Ich habe momentan wiede ein Problem mit meinem Design-Code, denn im Main wird der Text

code:

1:

. Hier kommt das Main hin.

angezeigt. Der erste Punkt sollte eigentlich nicht da sein und ist auch weiß, die restliche Schrift ist nämlich braun.
Hier der Design-Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

<html>
<head>
<title>Ponity</title>
<BODY marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="no">
<img src="design.png">

<div id="Layer1" style="position: absolute;  left: 312px; top: 215px;">
  <iframe src="main.htm" name="main" width="623" height="409" frameborder=0 scrolling="yes" noresize style="border: 0px" allowtransparency="true" ;>
  </iframe>
</div>

<div id="Layer2" style="position: absolute;  left: 110px; top: 337px;">
  <iframe src="menue.htm" name="menu" width="184" height="317" frameborder=0 scrolling="yes" noresize style="border: 0px" allowtransparency="true" ;>
  </iframe>
</div>

</body>
</html>

Und der style.css - Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:

body {
font-size: 8pt;
font-family: Arial;
color: #744C11;
}

table {
font-size: 8pt;
font-family: Arial;
color: #744C11;
bordercolor: #744C11;
border: 2px dotted #744C11;
border-top-widht: 1px;
border-right-widht: 1px;
border-bottom-widht: 1px;
border-left-widht: 1px;
}

hintergrund {
background-color: #B28B50;
}

A:link { color: #744C11; font-size: 8pt; font-style: normal; text-decoration: underline overline; }
A:visited { color: #744C11; font-size: 8pt; font-style: normal; text-decoration: underline overline; }
A:hover { color: #744C11; font-size: 8pt; font-style: normal; text-decoration: none; filter:blue; }
A:active { color: #744C11; font-size: 8pt; font-style: italic; text-decoration: underline overline; }
}

input, select, option, textarea, {
background-color: #D7B474;
color: #744C11;
font-face: Tahoma;
font-size: 8pt; }

body { 
scrollbar-arrow-color: #E3C080; 
scrollbar-base-color: #E3C080; 
scrollbar-track-color: #E3C080; 
scrollbar-face-color: #6E4710; 
scrollbar-highlight-color: #E3C080; 
scrollbar-3dlight-color: #E3C080; 
scrollbar-darkshadow-color: #E3C080; 
scrollbar-shadow-color: #E3C080; 
}

Und dann der Main-Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body style="background-color:transparent">

Hier kommt das Main hin.

</body>
</html>

Screenshot:

Dann zum zweiten Problem: Bei dieser Tabelle ("Grafiken") sollten die Beiden unteren Zellen je 50% haben. Wie kriege ich das hin. Wie kann ich außerdem möglichst mit CSS diese weißen Linien anpassen?

Screenshot:

Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body style="background-color:transparent">

<table class="table" style="border-collapse: collapse;" border="2" cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td width="100%"><b>Fotos</b></td>
</tr><tr>
<td width="50%">keine Quellen vorhanden</td>
<td width="50%"></td>
</tr>
</tbody>
</table><p>

<table class="table" style="border-collapse: collapse;" border="2" cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td width="100%"><b>Grafiken</b></td>
</tr><tr>
<td width="50%">Design & Set</td>
<td width="50%">Lauriih von Ggen-Bilderklau.net</td>
</tr>
</tbody>
</table><p>

<table class="table" style="border-collapse: collapse;" border="2" cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td width="100%"><b>Sonstiges</b></td>
</tr><tr>
<td width="50%">keine Quellen vorhanden</td>
<td width="50%"></td>
</tr>
</tbody>
</table><p>

</body>
</html>