Probleme mit dem Internet Explorer

Unregistriert

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>

Alles anzeigen

und hier das CSS dafür:

CSS

/* =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
----------------------------------------------- */

Alles anzeigen

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

Bandit

Ein Link zur Seite wäre nicht schlecht.

fs0n

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

Bandit

Zitat von fs0n

Darf ich leider nicht öffentlich kommunizieren

Warum nicht? Machen wir hier deinen Job?

Zitat von fs0n

ich schicke es dir privat ja?

Achte auf meine Signatur!

fs0n

alles klar. dann hat sich das erledigt. sorry

Bandit

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

synaptic

bau dir nen eigenes stylesheet für den ie7 und bau das via conditional comment ein

Probleme mit dem Internet Explorer

Tags

Benutzer online in diesem Thema