Hallo,
ich habe eine ganz normale Seite (bzw. Beitrag in Jommla) mit dem TinyMCE 2.0 erstellt. Angezeigt werden soll ein Text und rechts daneben ein Bild. Nichts spektakuläres aber der Internet Explorer 7 macht Probleme.
So sieht es korrekterweise im Firefox aus:
Das macht IE7 daraus:
Ich habe auch schon alternative Editoren (JCE 1.5.2, JoomlaFCK) ausprobiert, aber das Problem bleibt bestehen. IE8 zeigt die Seite übrigens korrekt an, nur IE7 macht Murks.
Woran liegt’s?
Mondphasen oder Sonnenwind.
(Erschlag uns bloss nicht mit so 'ner Menge an brauchbaren Informationen zum Problem - sonst kann dir am Ende womöglich noch jemand helfen …)
Am IE…
Keine Ahnung, Kristallkugel kaputt…
Nach den Bildern geraten sieht es nach einem CSS-Problem mit
float und der Breite aus.
Um da systematisch vorzugehen, kann man die Ausgabe
als statische Datei abspeichern, relevantes CSS in die Datei
kopieren und dann vereinfachen. Irgendwann tritt dann der
Fehler nicht mehr auf, dann geht man einen Schritt zurück
und versucht an anderer Stelle zu vereinfachen, bis nur noch
sehr wenig CSS und XHTML übrig bleibt. Daran ist dann meist
leicht zu erkennen, woran das Problem genau liegt.
Dabei geht man jeweils davon aus, daß keine Fehler in den
Dateien selbst sind und nicht im Quirksmodus gearbeitet wird,
sonst ergeben sich da nochmal ganz andere Möglichkeiten, was
warum anders angezeigt wird.
[quote=“chrisb”]
(Erschlag uns bloss nicht mit so 'ner Menge an brauchbaren Informationen zum Problem - sonst kann dir am Ende womöglich noch jemand helfen …)[/quote]
Welche Information könnte noch weiterhelfen?
[quote=“hoffmann”]Nach den Bildern geraten sieht es nach einem CSS-Problem mit
float und der Breite aus.
Um da systematisch vorzugehen, kann man die Ausgabe
als statische Datei abspeichern, relevantes CSS in die Datei
kopieren und dann vereinfachen. Irgendwann tritt dann der
Fehler nicht mehr auf, dann geht man einen Schritt zurück
und versucht an anderer Stelle zu vereinfachen, bis nur noch
sehr wenig CSS und XHTML übrig bleibt. Daran ist dann meist
leicht zu erkennen, woran das Problem genau liegt.
Dabei geht man jeweils davon aus, daß keine Fehler in den
Dateien selbst sind und nicht im Quirksmodus gearbeitet wird,
sonst ergeben sich da nochmal ganz andere Möglichkeiten, was
warum anders angezeigt wird.[/quote]
Okay, klingt nachvollziehbar. Leider bin ich in diesem Fall technisch nicht versiert genug, um das auch umzusetzen. 
Zum Beispiel der Quellcode oder der Link zur Seite 
Stellst du die Frage ernsthaft …?
Wenn dein Auto kaputt ist, gehst du dann auch zum Mechaniker in die Werkstatt, zeigst ihm lediglich ein Foto von deiner Karre - und willst dann von ihm wissen, was unter das Haube defekt sein könnte …?
schreib in deinem footer das diese seite für FF optimiert wurde
da
[quote=„noreferer“]schreib in deinem footer das diese seite für FF optimiert wurde
da
[/quote]Da sprechen wieder mal die selbsternannten Experten und IT-Spezialisten 
[quote=„flower“][quote=„noreferer“]schreib in deinem footer das diese seite für FF optimiert wurde
da
[/quote]Da sprechen wieder mal die selbsternannten Experten und IT-Spezialisten [/quote]
es ist zwar nicht die beste lösung aber immerhin - der wille zählt 
bzw ich zumindest würde es so machen, für ne kleine private hp ist das vollkommend ausreichend
Nun, wenn man keine Lust hat, für alte Versionen vom MSIE
ausgiebig per ‘conditional comments’ Vereinfachungen
anzubieten, kann man immer noch einen alternativen Stil
anbieten, der einfach eine leere CSS-Datei darstellt, das ist auch
nur notwendig, weil man bei MSIE wohl anders als bei anderen
browsern CSS bei Problemen nicht einfach deaktivieren kann.
Bei einer ordentlich strukturierten Seiten ist auch eine CSS-freie
Varianten gut nutzbar, insofern ist das eine Lösung für alle, wo
das Darstellungsprogramm Probleme mit dem CSS hat, selbst
solche, die man gar nicht testen kann oder die man (noch) gar
nicht kennt.
Nutzer von bestimmten browsern anzupöbeln oder von denen
etwas zu fordern - entweder einen anderen browser zu nutzen
oder auch nur an den Einstellungen des browsers was zu ändern,
zeigt jedenfalls eine gewisse Unhöflichkeit und auch soziale
Inkompetenz des Autors.
Nun kann man auch nicht verlangen, daß der Autor sich allein
um alle Fehler von jeglichem browser kümmert - und Fehler hat
jeglicher browser reichlich - aber als Autor kann man sich schon
bemühen, dem Nutzer bei unerwarteten Schwierigkeiten
beizustehen und den Inhalt mit minimalen Aufwand zugänglich
zu halten.
Der Hinweis “Diese Seite wurde für Mozilla Firefox (und eine Auflösung blablabla) optimiert” ist für mich ein eindeutiges Zeichen für Faulheit und halb erledigte Arbeit. Das kommt bei mir nicht in Frage 
Jo, also ein Hinweis im Footer, einen bestimmten Browser zu verwenden, wäre für mich auch keine Alternative.
Zum Beispiel der Quellcode oder der Link zur Seite [/quote]
Ooookay, geht los. 
Die Seite ist leider noch nicht öffentlich, so dass ich keinen Link geben kann. Aber vielleicht entdeckt ja jemand ein Problem im Code. 
Quelltext der Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<base href="http://www.domain.com/about.html" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="title" content="About" />
<meta name="author" content="Administrator" />
<meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>domain.com - About</title>
<link href="/templates/tem_automotive/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); });
</script>
<link rel="stylesheet" href="/templates/tem_automotive/css/common.css" type="text/css" />
<link rel="stylesheet" href="/templates/tem_automotive/css/template_css.css" type="text/css" />
<script type="text/javascript" src="/templates/tem_automotive/overIE.js"></script>
<style type="text/css" media="all">
.author {display:none} .createdate {display:none} .modifydate {display:none} .buttons {display:none} </style>
</head>
<body id="body">
<div id="wrapper">
<div id="header">
<div id="headerheight">
<div id="logo">
<a href="/">
<img src="/templates/tem_automotive/images/logo.jpg" alt="image" width="265" height="60" /></a>
</div>
<div id="menu">
<ul class="menu"><li class="item10"><a href="http://www.domain.com/"><span>Home</span></a></li><li class="item31"><span class="separator"><span>|</span></span></li><li class="item14"><a href="/galleries.html"><span>Galleries</span></a></li><li class="item32"><span class="separator"><span>|</span></span></li><li class="item35"><a href="http://www.JP2503-shop.fineartprint.de" target="_blank"><span>Shop</span></a></li><li class="item33"><span class="separator"><span>|</span></span></li><li class="item16"><a href="/guestbook.html"><span>Guestbook</span></a></li><li class="item34"><span class="separator"><span>|</span></span></li><li id="current" class="active item21"><a href="/about.html"><span>About</span></a></li><li class="item36"><span class="separator"><span>|</span></span></li><li class="item18"><a href="/contact.html"><span>Contact</span></a></li></ul>
<div id="menu2"></div>
</div>
</div>
</div>
<div id="content">
<div id="main">
<div id="main-padding">
<div class="contentpaneopen_edit">
<span class="hasTip" title="Edit Article :: Published<br />Public<br />Saturday, 24 January 2009<br />Administrator"><a href="/about.html?task=edit&ret=aHR0cDovL3d3dy5waG90b2dyYXBoeS1hZHZlbnR1cmUuY29tL2Fib3V0Lmh0bWw%3D" ><img src="/images/M_images/edit.png" alt="edit" /></a></span> </div>
<h2 class="contentheading ">
About </h2>
<div class="contentpaneopen ">
<p><img class="system-pagebreak" src="/images/stories/passport2.jpg" border="0" alt="me" width="230" height="346" align="right" /></p><p> </p><p><span style="text-decoration: underline"><em><strong>About me:</strong></em></span></p><p align="left">Mein Name ist xxx. Ich wurde im Jahr 1981 geboren. Schon früh faszinierten mich die Fotografie und das Meer. <br />Mit 13 Jahren bekam ich meine erste Kamera geschenkt, eine analoge Kompaktkamera. Im Jahr 2000 machte ich mein Abitur mit Schwerpunkt Biologie und Kunst. <br />Im darauf folgenden Jahr kaufte ich mir meine erste digitale Kamera. (Casio QV3500EX) Nach weiteren kompakten Modellen landete ich schließlich bei DSLR- Kameras der Marke Nikon. <br />Derzeit fotografiere ich mit einer Nikon D300/ D700. Für die Unterwasserfotografie nutze ich Gehäuse und Blitzgeräte der Marke Seacam.</p><p align="left">blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><hr id="null" /><p><strong><em><span style="text-decoration: underline">Camera Equipment:</span></em></strong></p><p>DSLR Nikon D300/D700</p><p>AF Micro-NIKKOR 60 mm 1:2,8D<br />AF-S VR Micro-NIKKOR 105 mm 1:2,8G<br />AF-S DX Zoom-NIKKOR 12-24 mm 1:4G IF-ED<br />AF Fisheye-NIKKOR 16 mm 1:2,8D<br />AF-S Zoom-NIKKOR 24-70 mm 1:2,8G ED<br />AF-S VR Zoom-NIKKOR 70-200 mm 1:2,8G IF-ED</p><p>Kenko Teleplus MC 1,5x - Konverter DG - Nikon F</p><p>Stativ Manfrotto 055MF4 Magfiber<br />Novoflex Magic Ball</p><p>Lowepro Bags</p><p>Seacam silver Nikon D300/D700<br />2x Seacam Seaflash 150 digital<br />different Seacam Ports<br />Subtronic Strobe Arms<br />Magic Filter</p><hr id="null" /><p><span style="text-decoration: underline"><em><strong>Favorite links</strong>:</em></span></p><p><a href="http://www.nikon.de/">http://www.nikon.de</a><br /><a href="http://www.seacam.com/">http://www.seacam.com</a><br /><a href="http://www.seacamusa.com/">http://www.seacamusa.com</a><br /><a href="http://www.dpreview.com/">http://www.dpreview.com</a><br /><a href="http://www.wetpixel.com" target="_blank">http://www.wetpixel.com</a><br /><a href="http://www.digideep.de/">http://www.digideep.de</a><br /><a href="http://www.fotocommunity.de/">http://www.fotocommunity.de</a></p><p><br /><a href="http://www.deadline-online.net/" target="_blank"><img src="http://www.deadline-online.net/dead_180.gif" border="0" width="180" height="40" /></a> </p><p> </p>
</div>
<span class="article_separator"></span>
</div>
</div>
<div id="right">
</div>
<div style="clear:both"></div>
</div>
<div id="footer">
© 2009 domain.com - All rights reserved. </div>
</div>
<!-- Piwik -->
<a href="http://piwik.org" title="Web analytics api" onclick="window.open(this.href);return(false);">
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.domain.com/piwik/" : "http://www.domain.com/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
piwik_action_name = '';
piwik_idsite = 1;
piwik_url = pkBaseURL + "piwik.php";
piwik_log(piwik_action_name, piwik_idsite, piwik_url);
</script>
<object><noscript><p>Web analytics api <img src="http://www.domain.com/piwik/piwik.php" style="border:0" alt=""/></p></noscript></object></a>
<!-- End Piwik Tag -->
</body>
</html>Relevanter Abschnitt der CSS-Datei:
/* LAYOUT AND POSITIONING */
body#body {
text-align;center;
padding:0;
margin:0;
margin-top:30px;
background-color:#555;
}
#wrapper {
position:relative;
margin:0 auto;
width:733px;
background:white;
border:6px solid white;
}
#headerheight {
height:60px;
}
#logo {
position:absolute;
left:1px;
top:0px;
}
a img {
border:none;
}
#banner {
background: url(../images/banner.jpg) no-repeat left bottom;
width:733px;
height:165px;
}
#banner .moduletable {
width:200px;
margin-left:510px;
padding-top:10px;
}
#menu {
background:#333;
width:463px;
height:57px;
position:absolute;
top:0px;
left:270px;
z-index:20;
}
#menu2 {
background:#666;
width:463px;
position:absolute;
height:23px;
top:34px;
left:0px;
border-top:3px solid #FFF;
z-index:1;
}
#content {
background:url(../images/bg1.gif) repeat-y left top;
margin-top:15px;
margin-bottom:15px;
}
#main {
float:left;
width:460px;
}
#main-padding {
padding-left:10px;
padding-right:10px;
}
#right {
float:left;
width:250px;
}
#lowerpanel {
clear:both;
}
#lowerpanel .moduletable {
padding-left:12px;
padding-right:6px;
}
#block3 .moduletable {
padding-left:20px;
padding-right:6px;
}
#block1, #block2, #block3 {
float:left;
width:244px;
}
#footer {
clear:both;
margin-top:10px;
padding-top:6px;
padding-bottom:8px;
margin-left:auto;
margin-right:auto;
text-align:center;
background:#333;
color:#FFF;
}
#footer .moduletable {
padding-left:10px;
padding-right:10px;
}
#footer .moduletable,
#footer .moduletable div,
#footer .moduletable p {
color:#FFF;
}Ein paar Sachen die mir hier im CSS auffallen:
[ul]
[li]position:relative; ohne Positionierungsangaben[/li]
[li]Diverse Elemente nimmst du mit position:absolute direkt aus dem Layout raus und platzierst es davor so dass sie auf den Umfluss keinen Einfluss mehr haben (LOL Wortwitz)[/li]
[li]#right hat float:left, das ist jedenfalls nicht wirklich zielführend[/li][/ul]
Dann zu deinem Problem:
Das mag den Browser vll. dazu bewegen den Inhalt des Block-Elements (img) nach rechts zu bringen, aber warum sollte der nachfolgende Inhalt links davon platziert werden?
Um das zu erreichen muss das Element aus dem Layout heraus und rechts platziert werden. Das geht mit float:right
Außerdem arbeitest du mit XHTML1.0, warum also die ganzen alten Tags verwenden, wenn es mit CSS viel schöner aussieht 
Das Bild wird ja offenbar mittels align=“right” und nicht per
CSS rechts angeordnet. Das sollte auch der MSIE können.
Bei den Breitenangaben bleiben rund 190px für den Text
über - vielleicht auch weniger, wenn ich was übersehen habe.
Nach dem Auszug arbeitet der MSIE nicht im Quirksmodus,
gibt also vermutlich keine Probleme mit Fehlern bei der
Berechnung von Breiten.
Die lange Zeichenkette ‘bla…’ sollte eigentlich nur dazu führen,
daß die unter dem Bild weitergeht, nicht der gesamte Text davor.
Allerdings ist wohl nirgends präzise festgelegt, wie ein browser
align=“right” für ein Bild und align=“left” für den nächsten
Absatz darstellen soll. Kann man durchaus machen, daß man
den nächsten Absatz unter dem Bild beginnt. In der Spezifikation
steht da soweit ich das gesehen habe nur was von einem
zusätzlichen Präsentationsattribut für br, offenbar, wenn es im
gleichen Absatz wie das positionierte Bild auftaucht.
Warum das Bild allerdings nicht rechts angeordnet ist und
daneben einfach nichts steht, bleibt merkwürdig.
Besser, man verwendet statt der Präsentationsattribute CSS,
da ist das Verhalten besser festgelegt.
Jedenfalls könnte man das Testbeispiel schon mal auf diese
Gruppe von Bild und Text mit align-Attribut und festgelegter
Gesamtbreite reduzieren, um zu gucken, ob der Kram auch
ohne weitere CSS-Komplikationen auftritt - wenn nicht, kann man
die nach und nach wieder hinzufügen…
Achso, wenn man xml:lang und lang oben angibt, sollte
man dann auch später den Wechsel von englisch auf deutsch
eindeutig kennzeichnen, so jedenfalls ist das falsch, weil die
Seite ja offenbar sowohl deutsch als auch englisch enthält.
Normalste Sache von der Welt, und per se kein Punkt zur Beanstandung.
chrisb - einige alte browser-Versionen ignorieren das, keine
Ahnung, ob das auch bei irgendwelchen MSIE-Versionen
passiert oder dort im Quirksmodus. Bei den technisch aktuelleren
browsern wurde das aber wohl schon in der Frühphase von CSS2.1
geklärt, weswegen es da heute keine Probleme mehr macht,
zur Jahrtausendwende wohl schon…
Vielen Dank für eure Ratschläge!
Habe das Problem nun aber mit der Holzhammermethode gelöst: Habe den ganzen Joomla-Beitrag geleert, den Standardeditor von TinyMCE auf JCE umgestellt, Bild eingefügt und nach rechts ausgerichtet und letztendlich den Text eingefügt. Warum auch immer, aber der IE7 stellt die Seite nun korrekt dar.
[quote=“hoffmann”]
Achso, wenn man xml:lang und lang oben angibt, sollte
man dann auch später den Wechsel von englisch auf deutsch
eindeutig kennzeichnen, so jedenfalls ist das falsch, weil die
Seite ja offenbar sowohl deutsch als auch englisch enthält.[/quote]
Der Text ist noch nicht final und wird noch übersetzt. Die Seite ist am Ende also komplett in englisch.
