Ich habe für ein OT-Studio eine kleine Ergänzungsseite für eine Show zusammengebaut, die im IE, FF und Chrome ziemlich gleich aussieht und vom W3C Markup Validation Service auch als "This document was successfully checked as XHTML 1.0 Transitional!" bestätigt wurde. Und zu meinen externen CSS-Dateien sagt der CSS Validation Service: "Dieses Dokument wurde als CSS level 2.1 validiert!"
trotzdem stellt Opera diese Seiten TOTAL chaotisch dar und ich kann den Grund nicht erkennen!?!
Hat jemand vielleicht eine Idee?
Zur Erklärung: Ja, es sind (noch) Tabellen als Layouthilfe verwendet, da ich einfach keine Möglichkeit gefunden habe, die Seite - wie sie ist - ohne Hacks, immensen Aufwand und unzählige Browserweichen so darzustellen, wie das mit den verwendeten Tabellen möglich ist. Gerne lasse ich mir aber Wege zeigen, auch diese Tabellen noch zu entfernen, wenn ich damit nicht auf diverse Dinge verzichten muss...
Und auch wenn einiges vielleicht überflüssig erscheinen mag, zuviele Farben und Hintergrundbilder eingesetzt wurden - der Seiteninhaber möchte es nunmal SO haben...
.
Ok, habe noch 2 Screenshots angehängt und der XHTML-Code und die beiden CSS-Dateien folgen hier:
Seitenquelltext Startseite:
HTML-Code:
<?xml version='1.0' encoding='iso-8859-1'?>
<!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">
<head>
<title>Bellydance Evolution von und mit Jillina - praesentiert vom Tanzstudio HAYAL - OrientalMoves</title>
<meta name="title" content="Bellydance Evolution von und mit Jillina - praesentiert vom Tanzstudio HAYAL - OrientalMoves" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Bellydance Evolution von und mit Jillina - praesentiert vom Tanzstudio HAYAL - OrientalMoves, index htm" />
<meta name="abstract" content="bauchtanz, bauchtanz berlin, orientalischer tanz, tanzstudio berlin, bauchtanz unterricht, auftritt, tanzschule, amira almaas, index htm" />
<meta name="keywords" content="bauchtanz, bauchtanz berlin, orientalischer tanz, tanzstudio berlin, bauchtanz unterricht, auftritt, tanzschule, amira almaas, index htm" />
<meta name="author" content="Oliver Schramm" />
<meta name="publisher" content="bauchtanz berlin amira almaas" />
<meta name="copyright" content="bauchtanz berlin amira almaas" />
<meta name="page-topic" content="Bellydance Evolution von und mit Jillina - praesentiert vom Tanzstudio HAYAL - OrientalMoves" />
<meta name="audience" content="alle" />
<meta name="date" content="2012-01-20T20:00:00+00:00" />
<meta name="robots" content="index" />
<meta name="robots" content="follow" />
<meta name="revisit-after" content="7 days" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="bde.ico" />
<meta http-equiv="expires" content="0" />
<script type="text/javascript" src="js/bildanzeige.js"></script>
<link rel="stylesheet" type="text/css" href="css/format.css" />
<link rel="stylesheet" type="text/css" href="css/menue.css" />
</head>
<body>
<table id="tabelle" cellspacing="0" cellpadding="0">
<!-- Spaltenbreitendefinition -->
<tr>
<th style="width:22px"></th>
<th style="width:10px"></th>
<th style="width:*"></th>
<th style="width:260px"></th>
<th style="width:10px"></th>
<th style="width:22px"></th>
</tr>
<!-- Schattenrahmen oben -->
<tr>
<td id="s1"></td>
<td id="s2" colspan="4"></td>
<td id="s3"></td>
</tr>
<!-- scharzer Rahmen oben und Schattenrahmen links und rechts -->
<tr>
<td id="s4" rowspan="6"></td>
<td id="b1" colspan="4"> </td>
<td id="s6" rowspan="6"></td>
</tr>
<!-- Kopfzeile und scharzer Rahmen links und rechts -->
<tr>
<td id="b2" rowspan="4"></td>
<td id="kopf" colspan="2">BELLY DANCE EVOLUTION in BERLIN</td>
<td id="b3" rowspan="4"></td>
</tr>
<tr>
<!-- linke Ueberschrift -->
<td id="top1">
HAYAL - ORIENTAL MOVES präsentiert:<br /><br />
BELLYDANCE EVOLUTION<br /><br />
von Jillina - Show am 29.05.2012 in Berlin
</td>
<!-- rechte Seite Menue -->
<td id="nav" rowspan="2">
<div id="menue1">
<ul>
<li><a href="show.html" title="Show">BDE Show</a></li>
<li><a href="workshops.html" title="Jillina Workshops">Jillina Workshops</a></li>
<li><a href="hayal.html" title="HAYAL Pre-Show">HAYAL Pre-Show</a></li>
<li><a href="tickets.html" title="Tickets">Tickets</a></li>
<li><a href="http://www.hayal-orientalmoves.de/bauchtanz-berlin-kontakt/kontakt.html" title="Kontakt">Kontakt</a></li>
<li><a href="http://www.hayal-orientalmoves.de/" title="Hayal-Orientalmoves">Hayal - Oriental Moves</a></li>
<li><a href="http://www.hayal-orientalmoves.de/bauchtanz-berlin-kontakt/impressum.html" title="Impressum">Impressum</a></li>
</ul>
</div><br /><br /><br />
<div id="box">
<div class="box-text-fett">«<span style="box-text"> Love knows no bounds in this tale of murder and deceit where no one is who they seem. </span>»</div>
</div>
</td>
</tr>
<!-- linke Seite Inhalt -->
<tr>
<td id="top2">
<a href="images/bde-plakat.jpg" target="_blank"><img src="images/bde-plakat-klein.jpg" title="Bellydance Evolution Plakat" alt="Bellydance Evolution Plakat" style="width:750px; height:1056px; border:solid 1px #B0B9B9;" /></a>
</td>
</tr>
<!-- Fusszeile -->
<tr>
<td id="fuss" colspan="2">HAYAL - OrientalMoves - 10967 Berlin, Körtestraße 10</td>
</tr>
<!-- schwarzer Rahmen unten -->
<tr>
<td id="b4" colspan="4"> </td>
</tr>
<!-- Schattenrahmen unten -->
<tr>
<td id="s7"></td>
<td id="s8" colspan="4"></td>
<td id="s9"></td>
</tr>
</table>
</body>
</html>
CSS allgemein alle Seiten:
Code:
/* ========== Allgemeine Einstellungen ========== */
body
{
background-color: #383838;
margin-top: 20px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
}
/* Tabellendesign */
#tabelle
{
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 1200px;
}
h2
{
color: #51605B;
font-family: georgia,arial,helvetica,verdana,tahoma,sans-serif;
font-size: 22px;
letter-spacing: 2px;
margin-bottom: 30px;
}
/* ========== Kopf ========== */
#kopf
{
background-color: silver;
background-image: url(../images/navleiste.jpg);
background-repeat: repeat-x;
color: #000;
font-family: georgia,arial,helvetica,verdana,tahoma,sans-serif;
font-size: 17px;
font-variant: small-caps;
height: 40px;
letter-spacing: 10px;
line-height: 20px;
text-align: center;
vertical-align: middle;
width: 100%;
}
/* ========== Mittelbereich ========== */
#top1
{
background-color: #181818;
color: gray;
font-family: georgia,arial,helvetica,verdana,tahoma,sans-serif;
font-size: 22px;
font-variant: small-caps;
height: 40px;
line-height: 20px;
padding: 2em;
text-align: left;
vertical-align: top;
}
#top2
{
background-color: #181818;
background-image: url(../images/background-top2.jpg);
background-repeat: repeat-x;
padding: 20px;
text-align: center;
vertical-align: top;
}
#textbox
{
background-color: #232323;
background-image: url(../images/fv.jpg);
background-repeat: repeat-x;
color: #7d7d7d;
font-family: arial,tahoma,verdana,helvetica,sans-serif;
font-size: 17px;
letter-spacing: 0px;
line-height: 20px;
padding: 1em;
text-align: justify;
}
#nav
{
background-color: #333333;
background-image: url(../images/nav.jpg);
background-position: left top;
background-repeat: repeat-x;
border-left-color: #000;
border-left-width: 1px;
border-left-style: solid;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
}
#box
{
background-color: #1c1c1c;
text-align: center;
padding: 0.5em;
}
.box-text
{
color: gray;
font-family: arial,tahoma,verdana,helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 17px;
}
.box-text-fett
{
color: silver;
font-family: georgia,serif;
font-size: 14px;
font-weight: bold;
line-height: 17px;
}
.copyright
{
color: silver;
font-family: georgia,serif;
font-size: 9px;
line-height: 17px;
}
.preshow
{
color: silver;
font-family: georgia,serif;
font-size: 16px;
}
/* ========== Fussbereich ========== */
#fuss
{
background-color: silver;
background-image: url(../images/navleiste.jpg);
background-repeat: repeat-x;
color: #000;
font-family: georgia,arial,helvetica,verdana,tahoma,sans-serif;
font-size: 14px;
font-variant: small-caps;
height: 40px;
letter-spacing: 10px;
line-height: 20px;
text-align: center;
vertical-align: middle;
width: 100%;
}
/* ========== Schatten um Hauptbereich ========== */
#s1
{
background-image: url(../images/1.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 22px;
border-width: 0px;
border-style: solid;
border-color: #eee;
}
#s2
{
background-image: url(../images/2.jpg);
background-repeat: repeat-x;
background-position: left top;
height: 22px;
width: 100%;
}
#s3
{
background-image: url(../images/3.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 22px;
}
#s4
{
background-image: url(../images/4.jpg);
background-repeat: repeat-y;
background-position: left top;
height: 100%;
width: 22px;
}
#s6
{
background-image: url(../images/6.jpg);
background-repeat: repeat-y;
background-position: left top;
height: 100%;
width: 22px;
}
#s7
{
background-image: url(../images/7.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 22px;
}
#s8
{
background-image: url(../images/8.jpg);
background-repeat: repeat-x;
background-position: left top;
height: 22px;
width: 100%;
}
#s9
{
background-image: url(../images/9.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 22px;
}
/* ========== schwarzer Rand um Hauptbereich ========== */
#b1
{
background-color: #000;
line-height: 10px;
}
#b2
{
background-color: #000;
width: 10px;
}
#b3
{
background-color: #000;
width: 10px;
}
#b4
{
background-color: #000;
line-height: 10px;
}
CSS Menü rechts:
Code:
/* ===== menue in spalte rechts ===== */
#menue1 ul, #menue1 li
{
color: #000;
list-style-type: square;
margin-left: 15px;
padding: 0px;
}
#menue1 a, #menue1 a:visited , #menue1 a:active
{
border-bottom-color: #5d5d5d;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #7d7d7d;
display: block;
font-family: arial,tahoma,verdana,helvetica,sans-serif;
font-size: 17px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
text-align: left;
}
#menue1 a:hover
{
background-color: #373737;
border-bottom-color: #000;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #fff;
text-decoration: none;
}
/* ===== allgemeine links im text ===== */
a:link, a:visited, a:active
{
color: #7d7d7d;
font-size: 17px;
font-family: arial,tahoma,verdana,helvetica,sans-serif;
line-height: 20px;
text-decoration: underline;
}
a:hover
{
background-color: #7d7d7d;
color: #eee;
text-decoration: none;
text-decoration: none;
}