Anzeige im IE6/7

[pod1987]

Hallo,

Im FF 3.5 und IE8 wird alles sauber angezeigt, nicht jedoch im IE6 bzw. 7. Der 6er zerhaut alles und im 7er stimmen vor allem die Positionierungen von einigen Elementen nicht:

- Iframe auf der Startseite
- Messe-Felder auf "Messen"
- Kontakt-Formular

Mit welchen Befehlen löse ich das sinnvollerweise, damit es browserübergreifend sauber angezeigt wird?

Für eure Hilfe schonmal vielen Dank.

vg
pod

[nockenfell]

http://de.selfhtml.org/css/layouts/browserweichen.htm
http://www.drweb.de/magazin/blitzschnelle-browserweiche/

Damit kannst du eine Browserweiche aufbauen. In der Weiche drin, steht dann jeweils die Änderung für den entsprechenden Browser

[pod1987]

danke schonmal, an die browserweiche hatte ich auch schon gedacht...

allerdings müsste ich ja erstmal wissen, was ich überhaupt für den ie angeben muss, damit es richtig positioniert wird.

für den iframe auf der startseite habe ich "float:left" definiert und für beide obere bilder einen "margin-bottom:50px". im ff richtig, im ie ist der abstand riesengroß. wie kriege ich den kleiner?

[nockenfell]

try and error. Ohne das ganze gesehen zu haben, kann ich dir keinen anderen Rat geben.

[pod1987]

Ich habe das Katalog-Modul verwendet. Für die Startseite (diese 4 Bilder) habe ich einen IFrame gebaut und eingebunden, das Modul hat ein eigenes Template mit folgendem Code:

Code: Select all

<text="#000000">
<__script__ type="text/javascript" src="/tooltip-test/wz_tooltip.js"></__script>
<div id="left" style="background:none; 
float:left;
vertical-align:middle;
margin-bottom:50px;
text-align:center; 
width:200px; 
height:180px;">
<span style="color:#6c0d6c; text-decoration:underline;font-weight:bold;font-style:italic;font-variant:small-caps;font-size:16px;">Stuhlkissen</span><p>
<div id="img1" style="background: url(../cmsms/uploads/images/home-backgr.gif);background-repeat: no-repeat; 
padding-top:9px;
margin-right:10px;
width:196px;
height:170px;
">  
<a href="http://www.lonczyk-gebr.de/cmsms/index.php?page=bonsai" target="_parent" border="no"><img src="{$image_1_url}" border="0" align="middle"</img></a>
</div>
</div>
<div id="right" style="background:none;
margin-left:200px;
margin-bottom:50px;
vertical-align:middle;
text-align:center;
width: 200px; 
height: 180px;">
<span style="color:#6c0d6c;text-decoration:underline;font-weight:bold;font-style:italic;font-variant:small-caps;font-size:16px;">Zierkissen</span><p>
<div id="img2" style="background: url(../cmsms/uploads/images/home-backgr.gif);
padding-top:9px;
width:196px;
height:170px;
">
<a href="http://www.lonczyk-gebr.de/cmsms/index.php?page=bruce" target="_parent"><img src="{$image_2_url}" border="0"</img></a>
</div>
</div>
<div id="left1" style="background:none; 
float:LEFT;
margin-left: 0px;
vertical-align:middle;
text-align:center; 
width:200px; 
height:180px;">
<div id="img1" style="background: url(../cmsms/uploads/images/home-backgr.gif) no-repeat;
padding-top:9px;
padding-bottom:0px;
width:196px;
height:170px;
">
<a href="http://www.lonczyk-gebr.de/cmsms/index.php?page=ernesto" target="_parent"><img src="{$image_3_url}" border="0"</img></a><p>
<span style="color:#6c0d6c; text-decoration:underline;font-weight:bold;font-variant:small-caps;font-style:italic;font-size:16px;">Dekoschals + Flächenvorhänge</span>
</div>
</div>

<div id="right1" style="background:none;
float:both;
margin-left: 200px; 
vertical-align:middle;
text-align:center;
width: 200px; 
height: 180px;">
<div id="img1" style="background: url(../cmsms/uploads/images/home-backgr.gif) no-repeat;
padding-top:9px;
padding-bottom:0px;
width:196px;
height:170px;
">
<a href="http://www.lonczyk-gebr.de/cmsms/index.php?page=bonsai-kh" target="_parent"><img src="{$image_4_url}" border="0"</img></a><p>
<span style="color:#6c0d6c;text-decoration:underline;font-weight:bold;font-variant:small-caps;font-size:16px;font-style:italic;">Tischdekoration</span>
</div>
</div>
<div id="bottom" style="background:none; 
float:both;
margin-top:80px;
margin-left:15px;
vertical-align:middle;
text-align:center; 
width:360px; 
height:50px;">
<span style="color:#000000;font-weight:bold;font-variant:small-caps;position:center;font-style:italic; font-size:16px;">DAS ANKLICKEN DER BILDER
FÜHRT SIE ZU DEN KOLLEKTIONEN
</span>
</div>
<__body>

Das ist mal das erste Problem.

[mike-r]

#pagewrapper hat keine width, probier da mal rum.
In Firebug (ff) sieht man, dass #main weiter links ist, als im IE. Auch sieht man, dass .back2 über dem Menü liegt. Da mal mit width, margin und padding rumspielen. Wozu überhaupt die 3 Container (.backx) da sind, kannst Du das erklären?
CSS korrigieren: http://jigsaw.w3.org/css-validator/vali ... 2Fcmsms%2F
Zur Hilfe: günstig Probleme zu lösen wäre, testweise den Hauptcontainern border zu geben, damit man besser sieht, wo sich was überlappt, wo margins und paddings falsch gesetzt sind etc.

Tools zur Wahrheitsfindung siehe Signatur...

[pod1987]

Das größere Problem hab ich derzeit mit der Messe-Seite,

Folgenden Code habe ich hier ebenfalls mit dem Katalog-Modul verwendet:

Code: Select all

</__body bgcolor="FFFFFF" text="#000000;
width:700px;
">
<__script__ type="text/javascript" src="/tooltip-test/wz_tooltip.js"></__script>
<div id="platzhalter" style="background:none;
height:30px;">
</div>
<div id="left" style="background-image: url(../cmsms/uploads/images/messe-backgr.png);
margin-left: 0px;
float:left;
margin-bottom:20px;
vertical-align:middle;
text-align:center;
width:300px; 
height:200px;">
<div id="img1" style="background:none;
padding-top:15px;
">
</div>
{$textbild1}
</div>

<div id="right" style="background-image: url(../cmsms/uploads/images/messe-backgr.png); 
margin-left: 320px; 
margin-bottom:20px;
vertical-align:middle;
text-align:center;
width: 300px; 
height: 200px;">
<div id="img2" style="background:none;
padding-top:15px;">
</div>
{$textbild2}
</div>

<div style="width:450px">
<div id="left1" style="background-image: url(../cmsms/uploads/images/messe-backgr.png);
background-repeat:no-repeat; 
float:left;
vertical-align:middle;
text-align:center;
margin-left: 0px;
width:300px; 
height:200px;">
<div id="img3" style="background:none;
padding-top:5px;
">
<p>
</div>
{$textbild3}
</div>

<div id="right1" style="background-image: url(../cmsms/uploads/images/messe-backgr.png);
background-repeat:no-repeat;
margin-left: 320px; 
vertical-align:middle;
text-align:center; 
width: 300px; 
height: 200px;">
<div id="img4" style="background:none;
padding-top:5px;">
<p>
</div>
{$textbild4}
</div>
<__body>

Im FF und IE8 alles richtig, im IE6 und 7 jedoch trotz float:left keine Anordnung nebeneinander. Woran kann das liegen?

vg
pod

[mike-r]

#pagewrapper hat keine width, probier da mal rum.
In Firebug (ff) sieht man, dass #main weiter links ist, als im IE. Auch sieht man, dass .back2 über dem Menü liegt. Da mal mit width, margin und padding rumspielen. Wozu überhaupt die 3 Container (.backx) da sind, kannst Du das erklären?
CSS korrigieren: http://jigsaw.w3.org/css-validator/vali ... 2Fcmsms%2F
Zur Hilfe: günstig Probleme zu lösen wäre, testweise den Hauptcontainern border zu geben, damit man besser sieht, wo sich was überlappt, wo margins und paddings falsch gesetzt sind etc.

Tools zur Wahrheitsfindung siehe Signatur...

[pod1987]

Ok, danach schaue ich nochmal.

Die backx sind in den CMSMS-Templates schon drin und zum Teil wohl auch als IE-Hacks gedacht. Hatte sie zwischendrin mal raus, da hats jedoch im IE6 wieder was zerissen.

Was sagst du zu dem float:left Problem? Habe mir da jetzt schon nen Wolf gesucht, jedoch keine vernünftige Lösung gefunden? Auch an den paddings, margins usw. habe ich schon rumprobiert, er positioniert die divs einfach nicht nebeneinander.

vg
pod

[pod1987]

Habe jetzt folgende "Lösung" gefunden:

Nach den floats ein "display:inline" setzen, jedoch kommt der ie scheinbar mit den margins nicht zurecht. Er interpretiert diese anders als ff und ie8. Wie kann ich denn dann die Elemente anders positionieren?

Bei der Messe-Seite klappt jedoch auch das nicht. Da zerschießt er alles.

vg
pod

[pod1987]

So, nach weiteren Stunden rumprobieren und weitersuchen, habe ich jetzt endlich die Lösung für die Messe-Seite:

Die Seiten-Breite war scheinbar zu wenig, war eig der Meinung, dass ich das vorher schonmal probiert hatte. Aber vielleicht habe ich auch nicht genug eingestellt.

Bleibt noch das Problem mit den zu großen "margins" im IFrame, dies besteht nur im IE6. Lt. Web bringts der Tag "display:inline", klappt aber nicht. Hat noch jemand Ideen?

vg
pod

[pod1987]

Nachdem wir jetzt soweit alles gefixt haben, gibt es nur noch ein Problem.

Bei kleineren Auflösungen als 1280x1024, also z.b. 1024x768 rutscht die Navigation nach links bzw. der IFrame ist zu groß und entsprechend verdeckt er die Navigation.

Verwendet werden dabei IE Hacks im Template:

Code: Select all

<!--[if lte IE 7]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(950,950));}
    #container {height: 1%;}
    #content {margin-top:-10px;}
    #main {margin-top:-600px;}
    #sidebar {position:absolute;top:150px;}
    #menuwrapper {position:absolute;top:180px;left:70%;}
    #_menuwrapper {_position:relative;_top:180px;_left:70%;}
#contactform {_margin-top:-200px;}
#myframe{ height: 650px;
width: 100px; 
position:absolute;
margin-top:-25px;
left: 40%;
vertical-align:center;
scrolling:no;
frameborder:0;
img border:0;
}
    <div id="left" style="background:#000000;">
    </style>
    <![endif]-->

Habe jetzt schon versucht das zu lösen. Aber sobald ich die position in den IE6 Hacks verändere, stimmt's im IE7 nicht mehr. Was kann ich hier also noch machen, damit das auch noch passt??

vg
pod

[cyberman]

Aber sobald ich die position in den IE6 Hacks verändere, stimmt's im IE7 nicht mehr.

Wenn die Hacks nur für den IE6 sind, warum legst du das nicht so via Conditional Comments fest?

Zumindest sollte es dann im IE7 nix ändern ...