Anzeige

Komische Darstellung in IE & Safari

Komische Darstellung in IE & Safari | PSD-Tutorials.de

Erstellt von Tease, 03.03.2009.

  1. Tease

    Tease wissensdurstig

    Dabei seit:
    27.03.2008
    Beiträge:
    292
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Adobe Production Premium CS4, Dreamweaver CS4, Logic Studio 2
    Komische Darstellung in IE & Safari
    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. [​IMG]

    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....
    [​IMG]
    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.
    [​IMG]
    [​IMG]

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

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

    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>&nbsp;</h1>
    <!-- end #header --></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>
    &nbsp;</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>&copy; 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>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </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. [​IMG]
     
    #1      
  2. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Komische Darstellung in IE & Safari
    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!
     
    #2      
  3. bigpaul

    bigpaul Aktives Mitglied

    Dabei seit:
    13.11.2005
    Beiträge:
    860
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Atom, PHPStorm, Chrome
    Komische Darstellung in IE & Safari
    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.
     
    #3      
  4. Tease

    Tease wissensdurstig

    Dabei seit:
    27.03.2008
    Beiträge:
    292
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Adobe Production Premium CS4, Dreamweaver CS4, Logic Studio 2
    Komische Darstellung in IE & Safari
    AW: Komische Darstellung in IE & Safari

    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!
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Komische Darstellung in IE & Safari
    AW: Komische Darstellung in IE & Safari

    auf alle Fäll solltest du die unterschiedlichen paddings und margins gleichsetzen
    Code (Text):
    1. *{
    2.   margin:0;
    3.   padding:0;
    4. }
    am anfang der css
    vielleicht löst das schonmal das eine oder andre Problem
     
    #5      
  6. bigpaul

    bigpaul Aktives Mitglied

    Dabei seit:
    13.11.2005
    Beiträge:
    860
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Atom, PHPStorm, Chrome
    Komische Darstellung in IE & Safari
    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..
     
    #6      
  7. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Komische Darstellung in IE & Safari
    AW: Komische Darstellung in IE & Safari

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

    Tease wissensdurstig

    Dabei seit:
    27.03.2008
    Beiträge:
    292
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Adobe Production Premium CS4, Dreamweaver CS4, Logic Studio 2
    Komische Darstellung in IE & Safari
    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! ;)
     
    #8      
  9. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Komische Darstellung in IE & Safari
    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!
     
    Zuletzt bearbeitet: 03.03.2009
    #9      
  10. Tease

    Tease wissensdurstig

    Dabei seit:
    27.03.2008
    Beiträge:
    292
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Adobe Production Premium CS4, Dreamweaver CS4, Logic Studio 2
    Komische Darstellung in IE & Safari
    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.....
     
    #10      
  11. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Komische Darstellung in IE & Safari
    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.... http://www.traum-projekt.com/forum/27-dreamweaver/54563-flash-verdeckt-popupmen.html
     
    #11      
x
×
×