Komische Darstellung in IE & Safari

Tease · 03.03.2009

Hallo Leute,

ich schon wieder mal. Ich weiß, dass verschiedenste Browser css-basierte Layouts unterschiedlich darstellen, aber das hilft mir gerade in dem konkretem Fall nix, weil der Großteil meiner erstellten Homepage auch funktioniert, aber vor allem eine Unterseite macht mir das Leben zur Zeit schwer.

Ich weiß, das sind jetzt mehrere Dinge und wahrscheinlich wird mir auch niemand helfen können, aber ich versuchs trotzdem mal, in der Hoffnung, dass wenigstens das ein oder andere Mysterium gelöst wird.

Eigentlich ist nur eine Seite meiner Website richtig betroffen, aber das ist auch ein schlechter Trost.

Ich habe auf einer Unterseite ein Youtube-Video embedded und das sollte eigentlich in meinem "Hntergrund-Feld" mittig dargestellt werden, wie der Text auch, aber vor allem beim IE 6 & 7 wird dieses Video linksbündig dargestellt, siehe ersten Screenshot. Opera 8 macht übrigens das gleiche. Ab Version 10 ist es auch da mittig....

Komisch ist auch , dass beim IE 6 (nicht bei 7) mein Footer und Header scheinbar zu hoch sind, denn da sieht man das wiederholte Hintergrung-Bild kurz anfangen, bevor der nächste DIV anfängt.

Außerdem benutzt der IE und auch Safari einen anderen Font. Weiß jemand wieso das so ist?

Außerdem stellt Safari meine "Body" Farbe nicht an, sondern nur weiß. Kann ich mir auch nicht erklären.

Ein weiteres Problem ist das Safari auf meinem Rechner die Hintergrund-Bilder rechts abschneidet. Bei Broswershots.org zeigen die Screenshots die Site aber korrekt an. Wem soll ich hier glauben?

Hier der entrechende HTML-Code:
</style></head>

<body class="oneColElsCtrHdr">

<div id="container">
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="bio.html">Kurzbiografie</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Projekte</a>
<ul>
<li><a href="push.html">Push'n Pull</a></li>
<li><a href="jazz.html">Jazzpiano</a></li>
<li><a href="bar.html">Barpiano</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Medien</a>
<ul>
<li><a href="videos.html">Videos</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
</li>
<li><a href="termine.html">Termine</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<h1> </h1>
</div>
<div id="mainContent">
<h2 class="h2schrift">Videos<a href="fotos.html"></a></h2>
<p class="p">All of me - Push'n Pull </p>
<p class="p">Live im Gasthaus Bogner in Braunau am Inn</p>
<p>
<object width="425" height="344" hspace="50" class="video">
<param name="movie" value="http://www.youtube.com/v/Do_nnMtfwP0&hl=de&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/Do_nnMtfwP0&hl=de&fs=1" width="330" height="270" hspace="50" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
 </p>
<p class="p">weitere Videos: </p>
<p class="p"><a href="videos_4.html">Satin Doll</a> ? <a href="videos_2.html">It don't mean a thing</a> ? <a href="videos_3.html">Good Times</a></p>
</div>
<div id="footer">
<p>© 2009 by <a href="http://www.media-powerplant.de" title="Link zu Media Powerplant" target="_blank" class="link2">media powerplant</a> ? <a href="impressum.html" title="Link zum Impressum" class="link2">Impressum</a><a href="impressum.html" title="Link zum Impressum" class="link2"></a> ? <a href="kontakt.html" title="Hier geht's zum Kontakt-Formular" class="link2">Kontakt</a></p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

und die css-Datei sieht so aus:

@charset "UTF-8";
body {
text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color: #9999999;
background-color: #FFF9D9;
}
.oneColElsCtrHdr #container {
width: 50em;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.oneColElsCtrHdr #header {
padding: 0; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
height: 105px;
margin: 0px;
background-image: url(Bilder/headerNeu.jpg);
}
.oneColElsCtrHdr #mainContent {
padding: 0;
background-image: url(Bilder/Webdesign%20CO_main.jpg);
margin: 0px;
height: 470px;
}
.h2schrift {
color: #541600;
margin: 0px;
left: 0%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 13px;
font-size: 18px;
}
.p {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 140px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
scrollbar-track-color:#541600;
text-align: center;
}
.pScroll {
text-align: center;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 140px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
scrollbar-track-color:#541600;
scrollbar-3d-light:#FFFFFF;
scrollbar-arrow-color:#541600;
scrollbar-face-color:#FFFBCB;
height: 320px;
z-index: 1;
overflow: scroll;
overflow-x: hidden;
scrollbar-base-color: #FFFBCB;
width: 560px;
}
.bild {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 1.5px;
border-right-width: 1.5px;
border-bottom-width: 1.5px;
border-left-width: 1.5px;
border-top-color: #A00;
border-right-color: #541600;
border-left-color: #A00;
padding: 0px;
clip: rect(0px,0px,0px,0px);
margin: 0px;
}
.video {
text-align: center;
margin-left: 270px;
}
.table {
padding-left: 0px;
margin-left: 190px;
margin-top: 10px;
}
.plinks {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 420px;
}
.kursiv {
font-style: italic;
font-size: 14px;
padding-left: 190px;
}
.enter {
background-color: #541600;
padding-left: 20px;
margin-left: 370px;
padding-right: 20px;
font-size: 14px;
font-family: "Courier New", Courier, monospace;
padding-top: 3px;
padding-bottom: 3px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
height: 31px;
background-image: url(Bilder/Webdesign%20CO_footer.jpg);
}
.oneColElsCtrHdr #footer p {
margin: 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
color: #FFF9D8;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-top: 5px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
text-align: center;
}

Wie gesagt, auch wenn ihr nur eine Idee zu einem der Probleme habt, wär ich euch sehr dankbar, wenn ihr mir helfen würdet.

seecretum · 03.03.2009

AW: Komische Darstellung in IE & Safari

Setz den ganzen Kram einfach in eine, einspaltige einzeilige Tabelle rein die du zentrierst... damit kommt der IE und die anderen besser klar!

bigpaul · 03.03.2009

AW: Komische Darstellung in IE & Safari

Hast du ein doctype?
Das wäre wichtig zu wissen.
Und hast du das ganze online? Ich würde mir das gerne mal live ansehen.

Tease · 03.03.2009

AW: Komische Darstellung in IE & Safari

bigpaul schrieb:
Hast du ein doctype?
Das wäre wichtig zu wissen.
Und hast du das ganze online? Ich würde mir das gerne mal live ansehen.

Ja, hab ich. Hier ist es:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Christian Ortner.de</title>
<link href="COlayout.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

Und hier die Seite online: Christian Ortner.de

Vielen Dank für deine Mühen!

sokie · 03.03.2009

AW: Komische Darstellung in IE & Safari

auf alle Fäll solltest du die unterschiedlichen paddings und margins gleichsetzen

Code:

*{
  margin:0;
  padding:0;
}

am anfang der css
vielleicht löst das schonmal das eine oder andre Problem

bigpaul · 03.03.2009

AW: Komische Darstellung in IE & Safari

das Video erbt folgende Eigenschaft:
.oneColElsCtrHdr #container {COlayout.css (Linie 22)
text-align:left;
}
Ich denke mal, daran liegt es, dass es links ausgerichtet wird. Probiere doch mal das zu entfernen und gucke ob es geht..

seecretum · 03.03.2009

AW: Komische Darstellung in IE & Safari

oder center... kann ich mir aber nicht vorstellen sonst würds der fuchs ja auch nach links schieben...

Tease · 03.03.2009

AW: Komische Darstellung in IE & Safari

Das war schon mal ein super Tip!

Ich habe text-align nun auf center gesetzt und jetzt ist es wirklich besser. Aber noch nicht 100%. Ich möchte das Video nicht genau in die Mitte setzen, sondern etwas weiter nach rechts.
Das habe ich so umgesetzt:
}
.video {
text-align: center;
margin-left: 170px;
}
und beim Firefox funktioniert es auch, aber eben nicht beim IE. Muss man das anders machen?

Weiß eigentlich jemand von euch, warum bei IE und Safari andere Fonts dargestellte werden und warum der Body in Opera weiß ist und nicht beige?

Vielen Dank für euern Support.

Bin auch noch in einem speziellen Dreamweaver-Forum, aber da ist die Hilfe ängst nicht so gut wie hier!

seecretum · 03.03.2009

AW: Komische Darstellung in IE & Safari

Also eine hundertprozentige garantie, das es in allen Browsern auf gleicher breite dargestellt wird, gibt es nur mit Blindgifs, dazu setzt du das video mit in eine Tabelle mit zwei spalten das Video in die Rechte spalte nun erstellst du mit ps oder irgendeinem grafikprogramm ein gif. 1X1px welches Transparent ist, dieses fügst du in die linke spalte ein und ziehst es auf die Breite bis das Video durch diese Spaltenvergrößerung auf die gewünschte Position gerutscht ist, hört sich kompliziert an ist es aber garnicht...

Warum es sich auf den anderen Browsern so schlecht verhält liegt daran, das sich Microsoft nicht an die Webstandarts hält.. andere Brwoser wie Opera sind halt einfach veraltet, sie erkennen manche Befehle garnicht und arbeiten unsauber mit manchen HTML Befehlen zum Beispiel <p> deswegen immer divtags verwenden wenn möglich... warum der Body in Opera weiss und nicht beige ist kann ich dir nicht sagen... vielleicht hast du ein paar css zeilen in den header reingepfuscht? Und bitte auch immer schauen das du eine Websichere Farbe benutzt hast!

Hier noch ein Link um einen kleinen Überblick über die Webstandarts zu bekommen!

Tease · 04.03.2009

AW: Komische Darstellung in IE & Safari

Ja super, so klappt es wunderbar!

Vielen Dank für eure Hilfe!

Aber recht elegant ist das ja nun mit dem unsichtbaren GIF nicht gelöst. Macht man das so? Kann ich mir ja nicht vorstellen, aber für'n Anfang reichts mir! Das werd ich schon noch lernen mit der Zeit.

Ein neues Problem hab ich jetzt erst entdeckt, vielleicht kann mir da auch noch jemand einen Tip geben.
Und zwar werden die aufspringenden Untermenüs der Rubrik "Medien" von den eingebetten Videos verdeckt -> Christian Ortner.de

Also, wenn man auf der Seite ist und dann auf den Reiter Medien geht, geht das Menü "hinter" den Videos auf. Zumindest bei ein paar Rechner, wo ich das ausprobieren konte war das so.
Das Menu hat aber einen z-index von 1000 (war so vorsingestellt), also an dem wirds nicht scheitern.
Gibts da vielleicht ne Voreinstellung, dass der verschachtelte DIV eine höhere Prio oder so hat?
Hab keine Ahnung.....

seecretum · 04.03.2009

AW: Komische Darstellung in IE & Safari

Ich konnte es auch nicht glauben, aber letztes Jahr (mach grad Ausbildung zum Medienkaufmann) hatten wir den Kurs Webdesign... dann ist mir der Lehrer mit den Blindgifs gekommen und ich hab geflucht

und gesagt wie unprofessionell des is... aber leider zwingt uns der liebe IE tatsächlich ab und zu zu solchen verkrüppelungen, da sich der Hund nicht an die Webstandarts hält... beim IE 8 dürfen wir uns auf Besserungen freuen, aber da ja immer noch ganz viele mit dem IE 6 umherdümpeln können wir da noch länger drauf warten bis diese Epedemie ausgerottet ist.. des mit dem überdecken der menüs... da warte ich auch noch auf ne Lösung.... gib mir bescheid wenn du es weisst...

kannst dir ja mal das anschauen....