msslovi0
Aktives Mitglied
Thread Starter
- Dabei seit
- 20.03.2005
- Beiträge
- 2.726
- Reaktionspunkte
- 117
Hi!
Man lernt ja mit der Zeit, mit den Macken des IE zu leben bzw. durch gesonderte Anweisungen das Verhalten zu erreichen, das andere Browser von Haus aus können.
Das Problem hier ist aber so strange, das kann man kaum noch toppen. Ich habe mir heute einen abgegoogelt, aber nichts dazu gefunden. Vielleicht hat ja hier jemand nich eine Idee.
Zunächst die Aufgabe:
Nicht weiter schwer eigentlich. Man nehme eine Handvoll Tags, schüttle die gut durch und schon hat man ein passendes Markup:
Dann nimmt man etwas css, kippt das auch noch mit ran und rührt kräftig durch:
Fertig.
Tja, typischer Fall von "Die Rechnung ohne den Wirt gemacht". Der IE zeigt nämlich das an:
Das Zitat fehlt. Aber auch nicht wirklich. Wenn man beim Laden genau aufpasst sieht man, dass der Text kurz aufblitzt. Mit Strg+A läßt er sich zwar nicht markieren:
Aber der Mauszeiger verwandelt sich beim Überfahren in das Markierungswekrzeug und der Text läßt sich dann auch markieren:
Ich habe jetzt alles mögliche versucht, den Text sichtbar zu bekommen, dabei aber nur folgende Erkenntnisse gewonnen:
Es ist egal, ob das <blockquote>-Element den Container bildet oder ein (beliebiges) anderes (mit <div> getestet).
Es ist egal, ob der float: left direkt auf das Bild angewandt wird oder auf einen dieses Bild umgebenden Container.
Es ist egal, ob ich <cite> in einen eigenen <p>-Tag stecke oder nicht.
So richtig lustig wird es aber eigentlich erst, wenn der Zitattext länger läuft (auf die Höhe betrachtet), als das Bild hoch ist (entweder weil mehr Text da ist oder man die Schriftgröße ändert), denn dann funktioniert es auch: http://byodkm.de/ie/lang.html
Entferne ich 'display: block' oder 'clear: both' für <cite>, wird der Text angezeigt, aber dann kommt es nicht mehr an die Vorlage heran.
So langsam aber sicher gehen mir die Ideen aus. Vielleicht hat hier noch jemand eine.
Matt
Man lernt ja mit der Zeit, mit den Macken des IE zu leben bzw. durch gesonderte Anweisungen das Verhalten zu erreichen, das andere Browser von Haus aus können.
Das Problem hier ist aber so strange, das kann man kaum noch toppen. Ich habe mir heute einen abgegoogelt, aber nichts dazu gefunden. Vielleicht hat ja hier jemand nich eine Idee.
Zunächst die Aufgabe:
Nicht weiter schwer eigentlich. Man nehme eine Handvoll Tags, schüttle die gut durch und schon hat man ein passendes Markup:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="page">
<h1>Willkommen</h1>
<blockquote>
<p>
<img src="portrait.png" alt="Vorname Nachname" />
„Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.”
<cite>Vorname Nachname<br /><small>Position</small></cite>
</p>
</blockquote>
</div>
</body>
</html>Dann nimmt man etwas css, kippt das auch noch mit ran und rührt kräftig durch:
Code:
* {
margin: 0;
padding: 0;
}
body {
background: #F7F3DB;
padding: 15px 0;
font: 75% Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#page {
width: 500px;
text-align: left;
margin: 0 auto;
}
h1 {
margin-top: 10px;
font-size: 100%;
color: #fff;
background: #229017;
line-height: 18px;
height: 18px;
padding-left: 10px;
}
blockquote {
padding: 10px;
border: 1px solid #229017;
background: #F6DA93;
color: #424242;
}
blockquote p {
font-style: oblique;
border: none;
}
blockquote img {
padding-right: 10px;
float: left;
}
cite {
display: block;
clear: both;
text-align: right;
font-style: normal;
font-weight: bold;
}
cite small {
font-size: 75%;
font-weight: normal;
}Fertig.
Tja, typischer Fall von "Die Rechnung ohne den Wirt gemacht". Der IE zeigt nämlich das an:
Das Zitat fehlt. Aber auch nicht wirklich. Wenn man beim Laden genau aufpasst sieht man, dass der Text kurz aufblitzt. Mit Strg+A läßt er sich zwar nicht markieren:
Aber der Mauszeiger verwandelt sich beim Überfahren in das Markierungswekrzeug und der Text läßt sich dann auch markieren:
Ich habe jetzt alles mögliche versucht, den Text sichtbar zu bekommen, dabei aber nur folgende Erkenntnisse gewonnen:
Es ist egal, ob das <blockquote>-Element den Container bildet oder ein (beliebiges) anderes (mit <div> getestet).
Es ist egal, ob der float: left direkt auf das Bild angewandt wird oder auf einen dieses Bild umgebenden Container.
Es ist egal, ob ich <cite> in einen eigenen <p>-Tag stecke oder nicht.
So richtig lustig wird es aber eigentlich erst, wenn der Zitattext länger läuft (auf die Höhe betrachtet), als das Bild hoch ist (entweder weil mehr Text da ist oder man die Schriftgröße ändert), denn dann funktioniert es auch: http://byodkm.de/ie/lang.html
Entferne ich 'display: block' oder 'clear: both' für <cite>, wird der Text angezeigt, aber dann kommt es nicht mehr an die Vorlage heran.
So langsam aber sicher gehen mir die Ideen aus. Vielleicht hat hier noch jemand eine.
Matt
