float und der Internet Explorer
Chris
- css
0 Maxx0 Chris
0 Julian Hofmann0 Chris
0 at
Hi
Ich überarbeite gerade ein größeres Projekt. Hier werden sehr oft Tabellen für die Anzeige von Aufzählungen benutzt. Da das ganze später aber von einem Fast-Laien gepflegt werden soll, würde ich gerne auf die Tabellen verzichten und das mit Aufzählungslisten, die ich mit CSS formatiere, ersetzen.
Das soll dann in etwa so aussehen, nur halt nicht mit Tabellen. Bisher stand das Datum in einer Spalte, und der Bla-Test in einer anderen.
15.11.1970 bla bla bla
bla bla bla bla bla bla
14.11.1970 bla bla
13.11.1970 bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla
Ich habe das mal mit einer <dl> umgesetzt. Das funktioniert soweit so gut, nur der IE kommt mit float nicht richtig zurecht, d.h. er rückt die Bla-Zeilen, die direkt neben einem Datum stehen, etwas nach rechts ein. Das gibt dann eine unsaubere Linie.
Ich habe hier schon einiges darüber im Forum gelesen, nur hat noch nichts richtig gepasst.
Hat jemand eine Idee, wie ich das sonst noch realisieren könnte, ohne auf Tabellen zurückzugreifen? Oder wie ich dem IE beibringen soll, dass er die Bla-Zeilen schön untereinander darstellen soll?
Grüße, Chris
Hier mal das Coding.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bla Test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
dt { border: 0.1em solid #dddddd; float: left; width: 6em; font-weight: bold; }
dd { border-left: 0.1em solid #dddddd; margin-left: 6.5em; }
-->
</style>
</head>
<body>
<dl>
<dt>13.11.1970</dt>
<dd>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</dd>
<dd>Bla bla bla</dd>
<dt>13.11.1970</dt>
<dd>Bla bla bla</dd>
<dd>Bla bla bla</dd>
<dt>13.11.1970</dt>
<dd>Bla bla bla</dd>
<dd>Bla bla bla</dd>
</dl>
</body>
</html>
Hallo Chris,
Das soll dann in etwa so aussehen, nur halt nicht mit Tabellen.
15.11.1970 bla bla bla
bla bla bla bla bla bla
14.11.1970 bla bla
13.11.1970 bla bla bla bla bla bla bla bla
bla bla bla bla bla bla blaIch habe das mal mit einer <dl> umgesetzt.
Warum willst du für tabellarische Daten keine Tabelle verwenden?
Grüße,
Jochen
» Warum willst du für tabellarische Daten keine Tabelle verwenden?
Hi
Weil die Seite später jemand pflegen soll, der keine große HTML Erfahrung hat. Meine Erfahrung ist hier, dass solche Leute mit Tabellen nur schwer zurecht kommen. Deswegen wollte ich das anders machen.
Grüße, Chris
Hallo.
dt { border: 0.1em solid #dddddd; float:
Hier steckt die Ursache. Manche Browser addieren Grenzlinien, andere ziehen die Linie innerhalb ihres Blocks.
Die dd ohne Datum daneben sind folglich um die Grenzlinienbreite der dts (0.1em) zu weit links. Wenn Du in dt keine Grenze für den rechten Rand angibst (Die wird von den dds ja eh erzeugt), müsste es klappen.
Grüße aus Würzburg
Julian
Hier steckt die Ursache. Manche Browser addieren Grenzlinien, andere ziehen die Linie innerhalb ihres Blocks.
Die dd ohne Datum daneben sind folglich um die Grenzlinienbreite der dts (0.1em) zu weit links. Wenn Du in dt keine Grenze für den rechten Rand angibst (Die wird von den dds ja eh erzeugt), müsste es klappen.
Hallo Julian
Leider war das nicht die Ursache. Ich habe den Rahmen nur erstellt, damit man den Fehler besser erkennen kann.
Selbst ganz ohne Rahmen macht der IE zicken.
dt { float: left; width: 6em; }
dd { margin-left: 6.5em; }
Grüße, Chris
Hallo.
dt { border: 0.1em solid #dddddd; float: left; width: 6em; font-weight: bold; }
dd { border-left: 0.1em solid #dddddd; margin-left: 6.5em; }
Die Zeile "dl * { margin: 0; padding: 0; text-indent: 0; }" voranzustellen, könnte schon helfen.
MfG, at