nicht angemeldet
Kapitulation bei CSS Layout Bug(?) im IE6
StruppiHallo Ihr lieben Hellen Köpfe ...
ich weiss weder ein noch aus ... schlage mich seit stunden mit einem Layouproblem mit auf einer seite rum und ich kann und mag nicht mehr .. nicht mal "unser" programmierer konnte einen Fehler finden ...
Corpus delicti liegt hier:
http://testing.photografx.org/tgs
Menüpunkt: Grundstücke -> über 200.000,- -> Gerasdorf Föhrenhain
(show frame source .. info.html)
ist eigentlich ne relativ simple seite die ich für einen bekannten erstelle ... er möchte sie selber warten ....
Habe .. um es ihm leicht zu machen ... komplett auf CSS gesetzt ...
dacht emir das ich ihm morgen mal was präsentieren kann .. bin heute aber im laufe des Tages auf einen Darstellungsfehler im IE6 gestossen (den ja leider noch viel zu viele User benutzen) ...
Komme nicht drauf was ich falsch mache .. bzw wo der hund begraben liegt ... habe glaub ich schon alle Float-Variationen durch ...
des css Code ist in einer externen datei ... ich denke die leute hier wissen wie sie zu den CSS Informationen kommen ... sicherheitshalber hier nochmal code für CSS & HTML
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#ff6600;
}
.small {
font-size: 10px;
}
.floatLeft {
float:left;
}
.floatRight {
float:right;
}
.floatClear {
clear:both;
}
#infoBox {
width: 730px;
height:595px;
margin:0;
padding:0;
}
#header {
background-image:url(../images/info/bg_header.gif);
background-repeat:no-repeat;
width: 402px;
height:28px;
margin:30px 0px 0px 298px;
padding: 2px 15px 0px 15px;
font-family:Arial black, Arial, Helvetica, sans-serif;
font-size: 18px;
}
#fotos {
width:298px;
height:310px;
margin:0;
padding:0;
}
#fotos a {
width:135px;
height:90px;
display:block;
float:left;
padding:3px 3px 3px 3px;
margin:0px 7px 7px 0px;
}
#fotos a:hover{
width:135px;
height:90px;
background-color:#ffe812;
padding:3px 3px 3px 3px;
margin:0px 7px 7px 0px;
}
#textBox {
width:422px;
height:460px;
margin:0;
padding:5px;
background-image:url(../images/info/bg_text.jpg);
background-repeat:repeat-x;
background-position:0px 0px;
text-align:left;
overflow: hidden;
}
#textBox p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 10px 0px 0px 0px;
}
.angaben {
margin:15px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
#kondi {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 10px 0px 0px 0px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2201 Gerasdorf</title>
<link href="../../../css_js/info.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" language="JavaScript" src="../../../css_js/info.js"> </script>
</head>
<body>
<div id="infoBox">
<div id="header">2201 Gerasdorf / Föhrenhain </div>
<div id="fotos" class="floatLeft">
<a href="javascript:openGallery(1)"><img src="images/1s.jpg" alt="bild1" width="135" height="90" border="0" /></a>
<a href="javascript:openGallery(2)"><img src="images/2s.jpg" alt="bild2" width="135" height="90" border="0" /></a>
<a href="javascript:openGallery(3)"><img src="images/3s.jpg" alt="bild3" width="135" height="90" border="0" /></a>
<a href="javascript:openGallery(4)"><img src="images/4s.jpg" alt="bild4" width="135" height="90" border="0" /></a>
<a href="javascript:openGallery(5)"><img src="images/5s.jpg" alt="bild5" width="135" height="90" border="0" /></a>
<a href="javascript:openGallery(6)"><img src="images/6s.jpg" alt="bild6" width="135" height="90" border="0" /></a>
</div>
<div id="textBox" class="floatLeft">
<p>Dieses sehr schöne Grundstück ist südlich ausgerichtet mit weitem Blick über die Äcker in ruhiger Lage. Ein Föhrenwald in Sichtweite und ein Badeteich in unmittel-barer Umgebung zeichnen dieses TOPGRUNDSTUECK aus.</p>
<p>Die voraussichtlichen Bebauungsbestimmungen müssen noch vom Gemeinderat beschlossen werden, gelten aber (lt. Bauamt ) als gesichert, BK I, II, max. 6,5m, g, 40%, 3m Vorgarten</p>
<p>Die Grundstücke sind noch nicht aufgeschlossen,<br />
die Aufschließungs- und Anschlusskosten sind <br />
nicht im Kaufpreis enthalten.</p>
<table class="angaben" width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td width="40%">Größe:</td><td width="60%"><strong>1765m²</strong></td></tr>
<tr><td width="40%">Kaufpreis:</td><td width="60%"><strong>€ 1.375.000,-</strong></td></tr>
</table>
<div id="kondi">Käuferprovision: 3% vom Kaufpreis + 20% USt.</div>
</div>
<img src="../../../images/info/logo.gif" alt="Topgrundstücke Logo" />
</div>
</body>
</html>
Vielleicht is ja noch jemand wach .. ?! Ich kann für heut nimma ...
lg & Vielen dank an alle Nachteulen im Voraus
Alexx
-
hallo,
Corpus delicti liegt hier:
http://testing.photografx.org/tgsInteressant. Eine völlig schwarze Seite ohne jeden Inhalt. Im Quelltext steht was von Javascript, das darf der erste Browser, den ich zum Anschauen genommen habe, aber nicht. Du wirst also noch die Alternative dazuschreiben müssen.
Menüpunkt: Grundstücke -> über 200.000,- -> Gerasdorf Föhrenhain
(show frame source .. info.html)Ich weiß nicht, wo ich hier eine "frame source" hernehmen soll. Und vermutlich stößt dir als bedenklich auf, daß bei deinem Layout kein Scrollen möglich ist und daher ein Teil des Inhalts nicht angezeigt werden kann. Du mußt also einfach das Scrollen wieder zulassen. Das bedeutet: laß die Tabelle weg und öffne deine Seiten in einem normalen Fenster. Mach also alles das rückgängig, was du eventuell als besonders gelungen empfindest. Dann sieht man vielleicht auch im IE6 das bißchen Inhalt - ist ja nicht viel.
ist eigentlich ne relativ simple seite
Nein. Dein Javascript vollführt allerhand Kunststückchen, unter anderem das, daß die "Seite" als Popup geöffnet wird und durchgängig auf einer Tabellenstruktur beruht. Die Tabelle soll immer "1000" breit sein - was passiert denn, wenn ein Browserfenster kleiner als 1000px gezogen wird bzw. auf dem Monitor grade keine 1000 Pixel Breite mehr zur Verfügung stehen? Und warum soll man im Popup keine Adreßzeile mehr sehen können sollen?
Habe .. um es ihm leicht zu machen ... komplett auf CSS gesetzt ...
Das hast du nicht. Du hast komplett auf Javascript gesetzt. Das ist der wichtigste Fehler, den du begangen hast.
Grüße aus Berlin
Christoph S.
-
hallo,
Corpus delicti liegt hier:
http://testing.photografx.org/tgsInteressant. Eine völlig schwarze Seite ohne jeden Inhalt.
hier hast du vollkommen recht ... Noscript Bereich zum Betreten der Site und Hinweise das Javascript aktiviert werden sollte bzw die Seite auf 1024 x 768 optimiert ist fehlt noch ... kommt sicher - ist kein bzw nicht mein Problem ;)
Ich weiß nicht, wo ich hier eine "frame source" hernehmen soll.
Quelltext des Frames anzeigen lassen .. ;) der tag war gestern lange
Und vermutlich stößt dir als bedenklich auf, daß bei deinem Layout »» kein Scrollen möglich ist ...
sorry ganz daneben .. die Seite soll einfach nicht scrollen - punkt aus ! es geht hier auch nicht um Inhalte sonder einach wo der fehler liegt das die Elemente der INFO-SEITE (welche in einem 730px x 595px div-container liegen)
im IE6 nicht korrekt bzw so wie in IE7, FF 1/2, Safari angezeigt werden .. bzw deren Fehlerkorrektur besser ist ... und ich den Fehler im Layout nicht finde ...Die Tabelle soll immer "1000" breit sein - was passiert denn, wenn »» ein Browserfenster kleiner als 1000px gezogen wird bzw. auf dem
Monitor grade keine 1000 Pixel Breite mehr zur Verfügung stehen?ja dann .. wird ein teil der site fehrlen ... aber nach Absprache mit meinem Kunden nehmen wir auf diesen Teil der Besucher leider keine Rücksicht .. sorry folks ... ! ;)
Und warum soll man im Popup keine Adreßzeile mehr sehen können
sollen?1.) Weil sich der Besucher auf die Inhalte konzentrieren soll/kann ... und nicht auf die adressleiste ...
2.) Weil ich dadurch wieder Platz gewinne - wie schon vorher gesagt ... die site soll NICHT scrollen ..Habe .. fast komplett auf CSS gesetzt ...
Das hast du nicht. Du hast komplett auf Javascript gesetzt.
Das ist der wichtigste Fehler, den du begangen hast.Ja ich merke bzw sehe das du kein Fan von JS bist ... aber bis auf die 1000px tabelle (welche ich durch nen div container mit ebenfalls fixer grösse ersetzen werde) ist die ganze site mit CSS ge-stylt ...
!Es geht hier um ein Darstellungsproblem des IE6 mit CSS !
Grüße aus Berlin
Guten Morgen aus Wien
Christoph S.
-
hallo,
ich merke bzw sehe das du kein Fan von JS bist
Das spielt keine Rolle, außerdem habe ich durchaus gelegentlich mit Javascript zu tun. Wenn es sinnvoll eingesetzt wird, kann Javascript ein mächtiges Werkzeug sein.
!Es geht hier um ein Darstellungsproblem des IE6 mit CSS !
IE6 interpretiert manche Abstände anders als standardkonforme Browser. Er rechnet beispielsweise Ränder dazu. Das größte Problem hast du bei solchen starren Pixellayouts. Du kannst dem nur entgegensteuern, wenn du mit conditional comments arbeitest.
Grüße aus Berlin
Christoph S.
-
hallo,
hallo & danke für die Antwort .. trotz meiner zugegebenermassen womöglich leicht genervt wirkenden antwort ;)
ich merke bzw sehe das du kein Fan von JS bist
Das spielt keine Rolle, außerdem habe ich durchaus gelegentlich mit »» Javascript zu tun. Wenn es sinnvoll eingesetzt wird, kann Javascript »» ein mächtiges Werkzeug sein.
Ich würde auch gern drauf verzichten .. aber die wünsche des Kunden sind halt soweit ich mich informiert habe nur mit JS zu bewerkstelligen ...
Was mich aber wirklich stört ist, das ich noch keine Möglichkeit gefunden habe OHNE JS 2 (i)frames gleichzeitig zu änden ... weisst du da vielleicht etwas ?
!Es geht hier um ein Darstellungsproblem des IE6 mit CSS !
IE6 interpretiert manche Abstände anders als standardkonforme
Browser. Er rechnet beispielsweise Ränder dazu. Das größte Problem »» hast du bei solchen starren Pixellayouts. Du kannst dem nur
entgegensteuern, wenn du mit conditional comments arbeitest.danke für den tip ... habe mich bereits informiert ... ist ja eigentlich recht simpel so ... allerdings nur wenn man weiss was der IE hier genau falsch interpretiert ... er fügt definitv irgendwelche ränder dazu ... aber warum zb nur das letzte Thumnail in die nächste Zeile rutscht ... hmmm ... naja ich werd wohl hoffentlich noch draufkommen ...
Grüße aus Berlin
danke
Christoph S.
AlexxJ
-
Hallo photografx,
Ich würde auch gern drauf verzichten .. aber die wünsche des Kunden sind halt soweit ich mich informiert habe nur mit JS zu bewerkstelligen ...
Dann hat der Kunde merkwürdige Wünsche. Wenn ich mir eine Webseite erstellen lassen würde, würde ich dafür sorgen, dass möglichstviele Leute die Seite ansehen können. Und nicht nur Besucher mit aktivierten Frames, aktiviertem javascript und einem Bildschirm größer als 1000px.
Was mich aber wirklich stört ist, das ich noch keine Möglichkeit gefunden habe OHNE JS 2 (i)frames gleichzeitig zu änden ... weisst du da vielleicht etwas ?
Frames = böse. Nur mit Javascript funktionierende Seite = böse. Verzichte einfach auf beides.
danke für den tip ... habe mich bereits informiert ... ist ja eigentlich recht simpel so ... allerdings nur wenn man weiss was der IE hier genau falsch interpretiert ... er fügt definitv irgendwelche ränder dazu ... aber warum zb nur das letzte Thumnail in die nächste Zeile rutscht ... hmmm ... naja ich werd wohl hoffentlich noch draufkommen ...
Vielleicht ist es der normale boxmodel-Bug? Ist der IE im Standard-Modus? Hast du dir mal mit einem DOM-Inspector das Problem angeguckt? Hast du mal den Seitenquellcode auf das Problem reduziert?
Jonathan
-
-
IE6 interpretiert manche Abstände anders als standardkonforme Browser. Er rechnet beispielsweise Ränder dazu.
Das ist Quatsch, das tut er nur im Quirksmode, der hier aber nicht benutzt wird.
Struppi.
-
-
-