Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 07.03.2012, 11:12
Benutzerbild von spezies-8472
spezies-8472 spezies-8472 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2008
Ort: Berlin-Bohnsdorf
Beiträge: 73
spezies-8472 befindet sich auf einem aufstrebenden Ast
Böse Opera (11.61) stellt meine Seiten VÖLLIG wirr dar...

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">&nbsp;</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&auml;sentiert:<br /><br />
                &nbsp;&nbsp;&nbsp;&nbsp;BELLYDANCE EVOLUTION<br /><br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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&ouml;rtestra&szlig;e 10</td>
        </tr>
<!-- schwarzer Rahmen unten -->
        <tr>
                <td id="b4" colspan="4">&nbsp;</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;
}
Angehängte Grafiken
Dateityp: jpg BDE-FF.jpg (102,8 KB, 15x aufgerufen)
Dateityp: jpg BDE-OPERA.jpg (83,3 KB, 14x aufgerufen)
__________________
Jeder weiß, wie schnell das ist - aber mit welcher Geschwindigkeit breitet sich Dunkelheit aus
Mit Zitat antworten
Sponsored Links