Frank: Problem mit Breitenangabe im IE6

Hallo zusammen,

in einem <div> möchte ich einen Text so angezeigen, dass die einzelnen Zeichen untereinander stehen. Das nachfolgende Beispiel sieht im Mozilla (Linux) korrekt aus. Jedes Zeichen wird in einer eigenen Zeile dargestellt. Der IE6 packt aber die beiden Punkte mit dem jeweiligen Buchstaben davor in die gleiche Zeile.

Ich habe schon verschiedene Angaben zu width, margin und padding durchprobiert, aber leider ohne Erfolg.

Habt ihr einen Tipp für mich? Hier der revelante Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Frank Opper">

<style type="text/css">
<!--

body {
  width: 100%;
  height: 100%;
  background: #ffefd5 ;
  color: #000000;
  font-family: Verdana,sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0
}

div#head {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: auto;
  margin: 0;
  padding: 0 1.5em 0 0.5em;
  border: none;
  background: #ffcc33;
}

div#head h1 {
  width: 1em;
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
  font-size: 2em;
  font-weight: bold
}

div#head h1 span {
  color: #ffff33
}

-->
</style>

<title>Frank Opper: Startseite</title>
</head>

<body>

<div id="head">
  <h1>w w w . <span>f r a n k - o p p e r</span> . d e</h1>
</div>

</body>
</html>

Viele Grüße
Frank

  1. Hallo Frank,

    <h1>w w w . <span>f r a n k - o p p e r</span> . d e</h1>

    Probiers mal so:
    <h1>w w w  . <span>f r a n k - o p p e r</span>  . d e</h1>

    MfG,
    Hartmut R.

  2. Hallo Frank,

    <h1>w w w . <span>f r a n k - o p p e r</span> . d e</h1>

    <h1>
      <span>w</span>
      <span>w</span>
      <span>w</span>
      <span>.</span>
      <span>
        <span>f</span>
        <span>r</span>
        <span>a</span>
        <span>n</span>
        <span>k</span>
        <span>o</span>
        <span>p</span>
        <span>p</span>
        <span>e</span>
        <span>r</span>
      </span>
      <span>.</span>
      <span>d</span>
      <span>e</span>
    </h1>

    h1 span { display: block; }
    h1 span span { color: #ff3; }

    Wäre natürlich semantisch gesehen nicht ganz so toll, (Dein Beispiel war es aber auch nicht) mir fällt aber nichts besseres ein.

    Viele Grüße,
    Christian