CSS > Tabelle im Frame über den Rand hinaus?

Stephan1958 · #1 (**permalink**) 03.02.2016, 09:46

Hallo zusammen,
ich habe als CSS-Laie ein Problem.
Der Aufbau der Internetseite erfolgt über CSS.
Jetzt habe ich Änderungen an einer Seite vorgenommen und die Tabelle ragt über den Rand hinaus, aber nur in Firefox und Chrome, im IE korrekte Darstellung.
Ich finde den Fehler nicht, kann mir jemand helfen?

Hier der Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" xmlns:v="urn:schemas-microsoft-com:vml" xmlns

="urn:schemas-microsoft-com

ffice

ffice">

<head>
<title>Kneipp-Verein Herford -Aktuelles-</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<style type="text/css">
.style4 {
text-align: left;
}
.style5 {
text-align: center;
font-size: 37pt;
color: #000080;
letter-spacing: 3px;
font-family: Georgia;
}
.style7 {
text-decoration: underline;
color: #000080;
}
.style8 {
border: 2px solid #c0c0c0;
}
.style11 {
border: 1px solid #D8D8D8;
}
.style12 {
border: 1px solid #D8D8D8;
background-color: #DDDAD5;
}
.style14 {
color: #000000;
}
.style15 {
border: 1px solid #D8D8D8;
color: #000000;
}
.style16 {
color: #FF0000;
}
.style17 {
color: #000000;
}
.style18 {
border: 1px solid #D8D8D8;
font-family: Georgia;
color: #FF0000;
}
.auto-style1 {
border: 1px solid #D8D8D8;
text-align: left;
}
.auto-style2 {
border: 1px solid #D8D8D8;
font-family: georgia, serif;
color: #000000;
}
.auto-style3 {
border: 1px solid #D8D8D8;
color: #FF0000;
}
.auto-style4 {
vertical-align: middle;
}
.auto-style5 {
color: #000000;
border-style: none;
padding: 0;
}
.auto-style6 {
text-decoration: underline;
}
.auto-style7 {
color: #000080;
border-style: none;
padding: 0;
}
.auto-style9 {
vertical-align: middle;
text-decoration: underline;
}
.auto-style11 {
border: 1px solid #D8D8D8;
color: #000000;
text-align: center;
}
.auto-style12 {
border: 1px solid #D8D8D8;
text-align: center;
}
.auto-style13 {
border: 1px solid #D8D8D8;
color: #000000;
font-weight: bold;
text-align: center;
}
.auto-style14 {
border: 1px solid #D8D8D8;
color: #FF0000;
text-align: center;
}
.auto-style17 {
border: 1px solid #D8D8D8;
font-weight: bold;
}
.auto-style18 {
font-size: smaller;
color: #000080;
}
</style>
</head>

<body style="background-color: #808080">

<div id="container">
<div id="kopfbereich" class="style5">
</div>


<div id="mitte">
<div id="inhalt">
<h3 class="style7"><strong>Aktuelles</strong></h3>
<table style="width: 100%" class="style11">
<tr>
<td valign="top" class="auto-style2" style="width: 314px">
<strong><span class="auto-style4">
<img alt="" class="auto-style4" height="15" src="images/PfeilS.gif" width="16" />
</span></strong>Programm 1. Halbjahr 2016</td>
<td class="style15">
<span class="style14">hier finden Sie >></span></td>
<td class="auto-style11">
<strong>
<a class="style17" href="programm1hj2016.html" target="_self">[mehr...<span class="style17">]</span></a></strong></td>
</tr>
<tr>
<td valign="top" class="style15" style="width: 314px">
<strong><span class="auto-style4">
<img alt="" class="auto-style4" height="15" src="images/PfeilS.gif" width="16" />
</span></strong>Satzungsänderung 2016<br />
<em>
<span class="auto-style18">(gem.Rundschreiben/<br />
Änderungen sind rot markiert)</span></em></td>
<td class="style15">
<span class="style14">den Entwurf hier finden Sie >></span></td>
<td class="auto-style11">
<a href="Satzung-neu.pdf" target="_blank">
<img height="37" src="images/acrobat_reader.jpg" width="40" /></a></td>
</tr>
<tr>
<td valign="top" class="style15" colspan="3">
 </td>
</tr>
<tr>
<td valign="top" class="style15" colspan="3">
<span class="style16"><strong>Unsere
Übungsleiterinnen freuen sich jetzt schon
auf SIE</strong>.<strong><br />
<br />
<img height="319" src="images/Uebungsleiter2016-web.jpg" width="480" /></strong></span><br />
</td>
</tr>
<tr>
<td valign="top" class="auto-style3" colspan="3">
 </td>
</tr>
<tr>
<td valign="top" class="auto-style3" colspan="2">
<strong><span class="auto-style4">
<img alt="" class="auto-style4" height="15" src="images/PfeilS.gif" width="16" />
</span><span class="auto-style6"><em>Mitglieder werben Neumitglieder</em></span></strong><span class="auto-style5">
:<br />
</span><span class="auto-style7">
<strong>Prämie</strong></span><span class="auto-style5">: Für jedes
Neu-Mitglied im Kneipp-Verein
Herford, dass durch Initiative der
Mitglieder gewonnen wird, erhält das
werbende Mitglied die Prämie in Form
einer<span class="auto-style6">
</span> </span>
<span class="auto-style7">
<strong><span class="auto-style6">kostenlosen</span> Teilnahme
an einem Kurs</strong></span><span class="auto-style5">
aus unserem
Angebot. <br />
</span></td>
<td valign="top" class="auto-style14">
 </td>
</tr>
<tr>
<td valign="top" class="auto-style17" style="width: 314px">
<strong><span class="auto-style4">
<img alt="" class="auto-style4" height="15" src="images/PfeilS.gif" width="16" />
</span></strong>Das <span class="auto-style9">Anmeldeformular</span>
zu den <span class="style16">aktuellen Kursangeboten</span></td>
<td class="style15">
finden Sie hier >>
</td>
<td class="auto-style13">
<a href="Anmeldung%20Kurse.pdf" target="_blank">
<img height="37" src="images/acrobat_reader.jpg" width="40" /></a></td>
</tr>
<tr>
<td valign="top" class="style11" colspan="2">
 </td>
<td valign="top" class="auto-style12">
 </td>
</tr>
<tr>
<td valign="top" class="auto-style1" style="width: 314px">
<strong><span class="auto-style4">
<img alt="" class="auto-style4" height="15" src="images/PfeilS.gif" width="16" />
</span></strong>Unseren <span class="style16">
<strong>QR-Code <br />
des Kneipp-Vereins</strong></span>
mit dem Smartphone scannen <br />
und alle
Kontaktdaten <br />
sofort auf dem Handy <strong>> > > > ></strong></td>
<td class="style15">
<img height="216" src="images/qr_code_without_logo.jpg" width="219" /></td>
<td class="auto-style11">
 </td>
</tr>
</table>
</div>

<div id="sidebar">
<div id="sidebar-innen">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="kneipp.html">Kneipp</a></li>
<li><a href="kurse.htm">Kursangebot</a></li>
<li class="aktiv"><a href="aktuell.html">Aktuelles</a></li>
<li><a href="beitrag.html">Beiträge</a></li>
<li><a href="eintritt.html">Mitgliedschaft</a></li>
<li><a href="linkseiten.html">Links</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="impressum.html">Impressum</a>        </li>
</ul>
</div>
<div class="sidebar-unten"></div>
</div>

<div class="clearer"></div>
</div>

<div id="footer">
<p class="style4">Copyright © – <em>Kneipp-Verein Herford e.V.</em></p>
</div>
</div>

</body>

</html>

Danke im Voraus & Gruß

Stephan

protonenbeschleuniger · #2 (**permalink**) 03.02.2016, 10:35

Benutze bitte die Formatierung, die das Forum dir bietet. So wird sich dein Code niemand angucken wollen.

Stephan1958 · #3 (**permalink**) 03.02.2016, 11:11

sorry, ich gebe hier mal besser den direkten Link an:

Kneipp-Verein Herford -Aktuelles-

Danke & Gruß

cloned · #4 (**permalink**) 03.02.2016, 11:14

Warum wird das überhaupt mit Tabellen aufgebaut?

Schuld daran ist irgendwie das Bild, wenn man das raus löscht, passt es. Aber frag mich nicht wie man das beheben kann, mein Vorschlag ist: Bau es ohne Tabellen auf

Stephan1958 · #5 (**permalink**) 03.02.2016, 11:57

Danke, ich probier das heute Abend mal.

Stephan1958 · #6 (**permalink**) 04.02.2016, 11:47

Danke für die Hilfe, das Problem konnte mit Euer Hilfe behoben werden !!!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
"Reine" CSS Alternative für DIESE Tabelle...?	Forgetta	CSS	8	16.07.2010 12:01
CSS Tabelle mit Rahmen	noxz	CSS	4	21.06.2010 12:17
Tabelle durch div und css ersetzen (ohne div-suppe)?	tomstu	CSS	13	06.12.2007 19:07
Tabelle platzieren mit CSS / HTML ?	Bastus	(X)HTML	0	09.03.2004 13:01
Tabelle mit CSS zentrieren	to.ni	CSS	8	27.02.2004 10:33