Video von Text umfliessen lassen: IE andere Margins!

  • Hallo allerseits,

    ich hab hier das Problem, dass der IE bei meiner "Youtube-Class" (Clip wird wie ein normales Bild vom Text umgeben) die Margins nicht korrekt interpretiert...
    Nun hab ich versucht, Angaben zu machen, die nur der IE kann, aber irgendwie reagiert nun Mozilla :-(( kann mir hier einer weiterhelfen? Ohne den html>body Schnipsel gehts in Mozilla völlig korrekt, aber nicht im IE...mit dem Eintrag verreisst nun eben Mozilla...seufz

    Danke für einen Tipp und Gruss, Livio


    [size=8].youtube {
    float: left;
    width: 193px;
    height: 160px;
    margin: -14px 0px 10px 0px;
    }

    html>body .youtube {
    margin-top: 4px;
    }

    .tubeclear {
    clear:left;
    }[/SIZE]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hi Jeriko!

    Danke für den Tipp, aber "display: inline" geht nicht bei youtube-Videos...und viel mehr liefert der Artikel nicht :-( den Workaround finde ich nicht sehr schön, und will ich nicht unbedingt anwenden wenn nicht nötig...

    Kann hier keiner weiterhelfen?

    Danke, Gruss Livio

  • Ich schrieb dir in einem anderem Thread zu diesem Thema:

    HTML
    .youtube {
    float: left;
    width: 193px;
    height: 160px;
    margin: -14px 0px 10px 0px;
    _margin-top: 4px;
    }


    Geht das nicht? Mach dich kundig was Conditional Comments sind und verwende diese. Es wird Zeit das du mal was lernst ;)

  • Olafb

    geht leider nicht...dachte, das hätte ich in diesem Thread dort auch geschrieben, und was ich ausserdem noch unternommen hab :-/

    hat alles nicht funktioniert (*html oder html>body etc. für IE)

    ist ja nicht so, dass ich's nicht versuche...

  • aargh...

    Olafb:

    Ich weiss echt nicht wie weiter...hab nun auch mit conditional comments versucht:

    [size=8]<!--[if IE 7]> [size=10](bzw. gtr IE 5, oder nur "IE" ging alles nicht)
    [/SIZE]
    html>body .youtube {
    margin-top: 4px;
    }

    <![endif]-->
    [size=10]
    im code hab ich ausserdem mit *html ebenfalls versucht, oder der der eigentlich geklappt hat (wenn auch leider gleichzeitig mit Mozilla, siehe oben). Das mit "_margin-top" ging ebenfalls nicht (hat bei mir noch nie reagiert?)...

    mein IE will diese Comments irgendwie nicht interpretieren, oder hab ich komplett was übersehen?

    Würd mich echt freuen, wenn sich das einer nochmals anschauen würde...

    Danke und Gruss

    Livio
    [/SIZE][/SIZE]

  • Jo, du bist auf einem gutem Weg, Kompliment ;)

    HTML
    <!--[if IE]>
    .youtube {
    margin-top: 4px;
    }
    <![endif]-->


    Das muss nun nach allen anderen CSS in den Head rein. besser wäre allerdings dies in eine externe CSS auszulagern, dann ebend den link in den Comment. Dann kannst du später leicht weiteres ergänzen.
    Vergiss diese ganzen Hacks (* html, body>html, _, usw.) mit CCs ist der richtige Weg.

  • noch 1 Schritt? :-)

    Danke Olafb!

    so, hab jetzt in der header.php folgendes unmittelbar vor dem </style> eingefügt:

    Jetzt weiss ich nur noch nicht, wie das mit dem Link gehen soll, ich muss dem IE ja "sagen", dass er diese Anweisung hier bekommt, sehe ich das richtig? Gehört diese Anweisung dann wieder in die style.css, oder bin ich wieder auf dem Holzweg? :-))


    [size=8]
    <!--[if IE]>
    .youtube {
    margin-top: 4px;
    }
    <![endif]-->

    </style>

    <?php wp_head(); ?>
    <LINK REL="SHORTCUT ICON" HREF="http://blog.federspiel.biz/favicon.ico">
    </head>

    <body>

    <div id="page">

    <div id="header">

    <div id="headerimg" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;" title="Home">

    </div></div>


    [/SIZE]

  • Du erstellst eine neue ie.css, da rein kommt was hier zwischen den IFs steht, dann lädtst du die ie.css in deinen ThemeOrdner, dann kommt das

    HTML
    <!--[if IE]>
    <link rel="stylesheet" href="http://blog.federspiel.biz/wp-content/themes/default/ie.css" type="text/css" media="screen" />
    <![endif]-->

    Ach so, nicht in das <style></style> sondern danach!!!!!

  • [size=8][size=10]Also, meine ie.css ist im themes Ordner, und hat nur dies hier zum inhalt, richtig?[/SIZE]

    /*
    This is my special Internet Explorer CSS, because this dude does not speak our language...
    */

    .youtube {
    margin-top: 4px;
    }

    [/SIZE][size=8][size=10]Nun habe ich den Eintrag in der style.css gelöscht (nur noch "Mozilla-Anweisungen") und in der header.php dies eingefügt:

    [size=8]<!--[if IE]>

    <link rel="stylesheet" href="http://blog.federspiel.biz/wp-content/themes/default/ie.css" type="text/css" media="screen" />

    <![endif]-->

    </style>

    [/SIZE][/SIZE][/SIZE][size=8][size=10]Leider will der doofe IE IMMER noch nicht *grmbl*

    Hab ich das korrekt gemacht oder liegt hier ein anderes Problem vor (nebst meiner Codier-Unfähigkeit *g*)?

    Danke und Gruss

    Livio
    [/SIZE][/SIZE]

  • HTML
    </style>
    
    
    <!--[if IE]>
    
    
    <link rel="stylesheet" href="http://blog.federspiel.biz/wp-content/themes/default/ie.css" type="text/css" media="screen" />
    
    
    <![endif]-->
  • H A L E L U J A!

    Olafb, du bist ziemlich gut, weisst du das? :-)

    Es klappt einwandfrei!

    Vielen lieben Dank einmal mehr, klasse Hilfe!

    Gruss aus dem (jetzt noch viel mehr) sonnigen Zürich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!