Ergebnis 1 bis 7 von 7

Thema: Probleme mit dem Internet Explorer

  1. #1
    Unregistriert
    Gast

    Standard Probleme mit dem Internet Explorer

    Hi liebe Community,

    ich habe ein Problem mit der Darstellung im Internet Explorer. Sonst geht es überall und ich bin auch etwas stolz auf mich, dass ich es als HTML Laie so hinbekommen habe. Es geht um ein Quiz, welches über 4 Seiten geht. Ich habe mit Hilfe von Wordpress und dem Plugin "Kontakt Form 7" die benötigte Form mit Fragen und antworten gebastelt. Da es über mehrere Seite gehen muss, hätte ich es eigentlich mit HIlfe von PHP und MySql lösen müssen, da ich davon aber keine Ahnung habe, musste eine andere Lösung her. Ich überlegte mir also einfach per CSS eine DIV Box so zu definieren, dass immer nur ein bestimmter Teil sichtbar ist und das die "4-Seitige Grafik" eigentlich auf einer Seite ist. Per Anchor Link kann ich dann zur "nächsten Seite" springen, aber eigentlich spring ich nur einige Pixel runter zum nächsten Anchor. Soweit hoffe ich ist das Prinzip klar.

    Hier mein HTML Code für das Formular:

    Code:
    <div class="Quiz">
    <div class="Seite1">
    <h1 id="seite1" style="visibility:hidden;position: relative;">&nbsp;</h1>
    <div class="Frage1">
    [checkbox checkbox-28 class:checkbox-28  id:Antwort1 "Beispiel"][checkbox checkbox-29 class:checkbox-29  id:Antwort2 "Beispiel"][checkbox checkbox-30 class:checkbox-30  id:Antwort3 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage2">
    [checkbox checkbox-31 class:checkbox-31 id:Antwort4 "Beispiel"][checkbox checkbox-32 class:checkbox-32 id:Antwort5 "Beispiel"][checkbox checkbox-33 class:checkbox-33 id:Antwort6 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage3">
    [checkbox checkbox-34 class:checkbox-34 id:Antwort7 "Beispiel"][checkbox checkbox-35 class:checkbox-35 id:Antwort8 "Beispiel"][checkbox checkbox-36 class:checkbox-36 id:Antwort9 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage4">
    [checkbox checkbox-37 class:checkbox-37 id:Antwort10 "Beispiel"][checkbox checkbox-38 class:checkbox-38 id:Antwort11 "Beispiel"][checkbox checkbox-39 class:checkbox-39 id:Antwort12 "Beispiel"]
    </div>
    <div class="clear"></div>
    </br>
    <div class="weiter1">
    <a name="seite2" href=#seite2><img src="../btn_weiter.png"></a>
    </div>
    </div>
    <div class="Seite2">
    <h1 id="seite2" style="visibility:hidden;position: relative;">&nbsp;</h1>
    <div class="Frage5">
    [checkbox checkbox-40 class:checkbox-40 id:Antwort13 "Beispiel"][checkbox checkbox-41 class:checkbox-41 id:Antwort14 "Beispiel"][checkbox checkbox-42 class:checkbox-42 id:Antwort15 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage6">
    [checkbox checkbox-43 class:checkbox-43 id:Antwort16 "Beispiel"][checkbox checkbox-44 class:checkbox-44 id:Antwort17 "Beispiel"][checkbox checkbox-45 class:checkbox-45 id:Antwort18 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage7">
    [checkbox checkbox-46 class:checkbox-46 id:Antwort19 "Beispiel"][checkbox checkbox-47 class:checkbox-47 id:Antwort20 "Beispiel"][checkbox checkbox-48 class:checkbox-48 id:Antwort21 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage8">
    [checkbox checkbox-49 class:checkbox-49 id:Antwort22 "Beispiel"][checkbox checkbox-50 class:checkbox-50 id:Antwort23 "Beispiel"][checkbox checkbox-51 class:checkbox-51 id:Antwort24 "Beispiel"]
    </div>
    <div class="clear"></div>
    </br>
    <div class="zurueck">
    <a name="seite1" href=#seite1><img src="../btn_zurueck.png"></a>
    </div>
    <div class="weiter2">
    <a name="seite3" href=#seite3><img src="../btn_weiter.png"></a>
    </div></div>
    <div class="Seite3">
    <h1 id="seite3" style="visibility:hidden;position: relative;">&nbsp;</h1>
    <div class="Frage9">
    [checkbox checkbox-52 class:checkbox-52 id:Antwort25 "Beispiel"][checkbox checkbox-53 class:checkbox-53 id:Antwort26 "Beispiel"][checkbox checkbox-54 class:checkbox-54 id:Antwort27 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage10">
    [checkbox checkbox-55 class:checkbox-55 id:Antwort28 "Beispiel"][checkbox checkbox-56 class:checkbox-56 id:Antwort29 "Beispiel"][checkbox checkbox-57 class:checkbox-57 id:Antwort30 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage11">
    [checkbox checkbox-58 class:checkbox-58 id:Antwort31 "Beispiel"][checkbox checkbox-59 class:checkbox-59 id:Antwort32 "Beispiel"][checkbox checkbox-60 class:checkbox-60 id:Antwort33 "Beispiel"]
    </div>
    <div class="clear"></div>
    <div class="Frage12">
    [checkbox checkbox-61 class:checkbox-61 id:Antwort34 "Beispiel"][checkbox checkbox-62 class:checkbox-62 id:Antwort35 "Beispiel"][checkbox checkbox-63 class:checkbox-63 id:Antwort36 "Beispiel"]
    </div>
    <div class="clear"></div>
    </br>
    <div class="zurueck2">
    <a name="seite2" href=#seite2><img src="../btn_zurueck.png"></a>
    </div>
    <div class="weiter3">
    <a name="seite4" href=#seite4><img src="../btn_weiter.png"></a>
    </div></div>
    <div class="Seite4">
    <h1 id="seite4" style="visibility:hidden;position: relative;">&nbsp;</h1>
    <div class="name">
     [text* Name] </div>
    <div class="clear"></div>
    <div class="email">[email* email-739]</div>
    <div class="zurueck3">
    <a name="seite3" href=#seite3><img src="../btn_zurueck.png"></a>
    </div>
    <div class="senden">
    [submit ""]
    </div>
    </div>
    </div>
    <script>var input =     
    $('input').ezMark();</script>

    und hier das CSS dafür:

    Code:
    /* =QuizAnfang
    ----------------------------------------------- */
    #content {
    height: 1060px;
    width: 810px;
    overflow: hidden;
    /*border: 1px solid #666;*/
    background-color: transparent;
    padding: 0;
    margin-left:auto;
    margin-right:auto;
    top: 500px;
    }
    
    div.Quiz {height:100%; float:left; position:relative; width: 810px;}
    
    
    /*============ANFANG SEITE 1=====================*/
    
    div.Seite1 {
        float:left; width: 810px;height:1060px; position: relative;
        background: url(quiz_s1.jpg) no-repeat;
    }
    
    div.Frage1 { float:left;position:relative; top: 560px;left:156px;}
    
    #Antwort1 {
        float:left;
        position: relative;
        padding-right:50px;
        }
    
    #Antwort2 {
        padding-right:77px;
        float:left;
        position: relative;
    }
    
    #Antwort3 {
    
        float:left;position: relative;
    }
    
    div.Frage2 { float:left;position:relative;left: 156px;top: 616px;}
    
    #Antwort4 {
        padding-right:105px;
        float:left;position: relative;
    }
    #Antwort5 {
        padding-right:109px;
        float:left;position: relative;
    }
    #Antwort6 {
        float:left;position: relative;
    }
    
    div.Frage3 { float:left; position:relative;left:156px;top: 668px;}
    
    #Antwort7 {
        padding-right:118px;
        float:left;position: relative;
    }
    #Antwort8 {
        padding-right:92px;
        float:left;position: relative;
    }
    #Antwort9 {
        float:left;position: relative;
    }
    
    div.Frage4 { float:left; position:relative;left:156px;top: 720px;}
    
    #Antwort10 {
        padding-right:79px;
        float:left;position: relative;
    }
    #Antwort11 {
        padding-right:64px;
        float:left;position: relative;
    }
    #Antwort12 {
        float:left;position: relative;
    }
    
    div.weiter1 {
        float: right;
        font-size: 42px;
        position: relative;
        right: 200px;
        top: 773px;
    }
    
    div.weiter1 a{
    
    }
    /*============ENDE SEITE 1=====================*/
    
    .clear {clear:both;}
    
    /*============ANFANG SEITE 2=====================*/
    
    div.Seite2 {
        float:left; width: 810px;height:1060px; position: relative;
        background: url(asterix_quiz_s2.jpg) no-repeat;
    }
    
    div.Frage5 { float:left; position:relative;left:156px;top: 562px;}
    
    #Antwort13 {
        float:left;
        position: relative;
        padding-right:49px;
        }
    
    #Antwort14 {
        padding-right:79px;
        float:left;
        position: relative;
    }
    
    #Antwort15 {
    
        float:left;position: relative;
    }
    
    div.Frage6 { float:left;position:relative;left: 156px;top: 633px;}
    
    #Antwort16 {
        padding-right:105px;
        float:left;position: relative;
    }
    #Antwort17 {
        padding-right:144px;
        float:left;position: relative;
    }
    #Antwort18 {
        float:left;position: relative;
    }
    
    div.Frage7 { float:left; position:relative;left:156px;top: 728px;}
    
    #Antwort19 {
        padding-right:125px;
        float:left;position: relative;
    }
    #Antwort20 {
        padding-right:153px;
        float:left;position: relative;
    }
    #Antwort21 {
        float:left;position: relative;
    }
    
    div.Frage8 { float:left; position:relative;left:156px;top: 790px;}
    
    #Antwort22 {
        padding-right:106px;
        float:left;position: relative;
    }
    #Antwort23 {
        padding-right:94px;
        float:left;position: relative;
    }
    #Antwort24 {
        float:left;position: relative;
    }
    
    div.zurueck {
        float: left;
        font-size: 42px;
        position: relative;
        left: 150px;
        top: 773px;
    }
    
    div.zurueck a{
    color: transparent;
    }
    div.weiter2 {
        float: right;
        font-size: 42px;
        position: relative;
        right: 200px;
        top: 773px;
    }
    
    div.weiter2 a{
    color: transparent;
    }
    
    
    /*============ENDE SEITE 2=====================*/
    
    /*============ANFANGE SEITE 3=====================*/
    
    div.Seite3 {
    float:left; width: 810px;height:1060px; position: relative;
    background: url(quiz_s3.jpg) no-repeat;
    }
    
    div.Frage9 { float:left; position:relative;left:156px;top: 562px;}
    
    #Antwort25 {
        float:left;
        position: relative;
        padding-right:65px;
        }
    
    #Antwort26 {
        padding-right:76px;
        float:left;
        position: relative;
    }
    
    #Antwort27 {
    
        float:left;position: relative;
    }
    
    div.Frage10 { float:left;position:relative;left: 156px;top: 625px;}
    
    #Antwort28 {
        padding-right:60px;
        float:left;position: relative;
    }
    #Antwort29 {
        padding-right:51px;
        float:left;position: relative;
    }
    #Antwort30 {
        float:left;position: relative;
    }
    
    div.Frage11 { float:left; position:relative;left:156px;top: 687px;}
    
    #Antwort31 {
        padding-right:62px;
        float:left;position: relative;
    }
    #Antwort32 {
        padding-right:111px;
        float:left;position: relative;
    }
    #Antwort33 {
        float:left;position: relative;
    }
    
    div.Frage12 { float:left; position:relative;left:156px;top: 770px;}
    
    #Antwort34 {
        padding-right:102px;
        float:left;position: relative;
    }
    #Antwort35 {
        padding-right:100px;
        float:left;position: relative;
    }
    #Antwort36 {
        float:left;position: relative;
    }
    
    div.zurueck2 {
        float: left;
        font-size: 42px;
        position: relative;
        left: 150px;
        top: 773px;
    }
    
    div.zurueck2 a{
    color: transparent;
    }
    div.weiter3 {
        float: right;
        font-size: 42px;
        position: relative;
        right: 200px;
        top: 773px;
    }
    
    div.weiter3 a{
    color: transparent;
    }
    /*============ENDE SEITE 3=====================*/
    
    
    /*============ANFANG SEITE 4=====================*/
    
    div.Seite4 {
        float:left; width: 810px;height:1060px; position: relative;
        background: url(quiz_s4.jpg) no-repeat;
    }
    
    
    
    div.name {
        position: relative;
        float:left;
        width:100px;
        top: 660px;
        left:165px;
        line-height: 12px;
    }
    
    div.email {
        position: relative;
        float:left;
        width:100px;
        top: 720px;
        left:165px;
        line-height: 12px;
    }
    
    div.zurueck3 {
        float: left;
        font-size: 42px;
        position: relative;
        left: 55px;
        top: 908px;
    }
    
    div.zurueck3 a{
    color: transparent;
    }
    
    div.senden {
        float: right;
        position: relative;
        right: 172px;
        top: 906px;
    }
    
    
    input[type="radio"], input[type="checkbox"] {
        -moz-binding: none;
        -moz-box-sizing: border-box;
        background-color: -moz-field !important;
        border: 2px inset threedface !important;
        color: -moz-fieldtext !important;
        cursor: default;
        height: 17px;
        padding: 0 !important;
        width: 13px;
    }
    
    button, input[type="reset"], input[type="button"], input[type="submit"] {
        background: url(btn_senden.png) no-repeat;
        height: 84px;
        width: 214px;
        border: none;
        color: transparent;
        cursor: pointer;
    }
    
    input[type=text],
    input[type=password],
    textarea {
        background: transparent;
        border: none;
        color: #777;
    }
    input[type=text]:focus,
    textarea:focus {
        color: #373737;
    }
    textarea {
    
        width: 98%;
    }
    input[type=text] {
        padding: 6px;
    }
    
    /**
    * CSS File for ezMark jQuery Plugin
    *
    **/
    .ez-hide { opacity: 0; filter:alpha(opacity=0); }
    .ez-checkbox {
    background: transparent url(checkbox.png) 0 0px no-repeat;
    display:inline-block;
    }
    
    .ez-radio {
    background: transparent url('../images/radio-black.png') 0 1px no-repeat;
    display:inline-block;
    }
    
    .ez-checked { background-position: 0 -25px; }
    .ez-selected { background-position: 0 -19px; }
    
    .ez-checkbox-green {
    background: transparent url('../images/checkbox-green.png') 0 1px no-repeat;
    display:inline-block;
    *display: inline;
    }
    .ez-checked-green { background-position: 0 -18px; }
    .ez-checkbox, .ez-radio { zoom: 1; *display:inline; _height:30px; }
    
    
    /* =Quiz Ende
    ----------------------------------------------- */


    Is wirklich extrem wichtig, dass ich das irgendwie auch für den IE hinbekomme. Dort klappt das irgendwie nicht mit der Positionierung der versch. Bilder. Der interpretiert das komplett anders und dadurch kann ich uach gar nicht richtig die verschiedenen Seiten ansteuern. Ich weiss das ist viel von mir verlangt, aber falls einer kurz Zeit und Lust hat, wäre ich ihm sehr dankbar!

    Liebe Grüße
    Frederik
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Bandit (25.09.2012 um 11:28 Uhr) Grund: Code-Tags korrigiert

  2. #2
    Bandit
    Gast

    Standard AW: Probleme mit dem Internet Explorer

    Ein Link zur Seite wäre nicht schlecht.

  3. #3
    HTML Newbie
    Registriert seit
    25.09.2012
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit dem Internet Explorer

    so, hab mich jetzt mal schnell angemeldet. Darf ich leider nicht öffentlich kommunizieren, sorry ich schicke es dir privat ja?

  4. #4
    Bandit
    Gast

    Standard AW: Probleme mit dem Internet Explorer

    Zitat Zitat von fs0n Beitrag anzeigen
    Darf ich leider nicht öffentlich kommunizieren
    Warum nicht? Machen wir hier deinen Job?
    Zitat Zitat von fs0n Beitrag anzeigen
    ich schicke es dir privat ja?
    Achte auf meine Signatur!

  5. #5
    HTML Newbie
    Registriert seit
    25.09.2012
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit dem Internet Explorer

    alles klar. dann hat sich das erledigt. sorry

  6. #6
    Bandit
    Gast

    Standard AW: Probleme mit dem Internet Explorer

    Schon mal einen Validator bemüht? Siehe
    http://validator.w3.org
    und
    http://jigsaw.w3.org/css-validator/

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Probleme mit dem Internet Explorer

    bau dir nen eigenes stylesheet für den ie7 und bau das via conditional comment ein
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Probleme mit Internet Explorer
    Von Xx Andy xX im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.10.2007, 21:57
  2. Probleme mit dem Internet Explorer
    Von JPFischer im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.12.2006, 09:48
  3. probleme mit internet explorer
    Von guitarist im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 04.01.2005, 22:32
  4. Internet Explorer Probleme
    Von Nepi im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 28.06.2004, 19:09
  5. Internet Explorer Probleme?
    Von Foulfang im Forum Link Tipps
    Antworten: 0
    Letzter Beitrag: 18.04.2004, 16:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •