✔ IE versteht meine <div> nicht

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo liebe Community,

mein Kampf gegen die <div> ist leider noch nicht ausgestanden.
Ich war bis vor 15 Minuten noch super zufrieden mit mir und meinem "Layout", bis ich den ganzen Mist im IE aufgerufen habe und fast geheult hätte.


Quellcode der Site:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Ferienwohnungen "Alt-Borby" in Eckernf&ouml;rde</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript">

function bild(pfad, breite, hoehe)
{
    window.open(pfad, '_blank', 'width=' + breite + ',height=' + hoehe + ',location=no,menubar=no,resizable=no,scrollbars=no,' +
                                     'status=no,toolbar=no');
}
</script>
</head>
<body>
<h1>Ferienwohnungen in Alt-Borby</h1>    
<ul id="navi">
  <li><a href="home.php?site=start">Startseite</a></li>
  <li><a href="home.php?site=vorwort">Vorwort</a></li>
  <li><a href="home.php?site=stein">"Stein"</a></li>
  <li><a href="home.php?site=vogel">"Vogel"</a></li>
  <li><a href="home.php?site=umgebung">Umgebung</a></li>
</ul><br />
  
<div id="inhalt">
  <?php
  if ($site=="start" || $site=="") {
    include ("start.html");}
  elseif ($site=="vorwort"){
    include ("vorwort.html");}
  elseif ($site=="stein"){
    include ("stein.html");}
  elseif ($site=="vogel"){
    include ("vogel.html");}
  elseif ($site=="umgebung"){
    include ("umgebung.html");}
  elseif ($site=="impressum"){
    include ("impressum.html");}
    
  ?>
</div>
<div id="info">
  <h2>Informationen</h2>
  <b>Wohnung Stein</b><br />
  Hauptsaison: xy,-<br />
  Nebensaison: xy,-<br /><br />
  <b>Wohnung Vogel</b><br />
  Hauptsaison: xy,-<br />
  Nebensaison: xy,-<br /><br />
</div>
  
<div id="bilder">
  <?php
  if ($site=="start" || $site=="") {
    include ("b_start.html");}
  elseif ($site=="vorwort"){
    include ("b_vorwort.html");}
  elseif ($site=="stein"){
    include ("b_stein.html");}
  elseif ($site=="vogel"){
    include ("b_vogel.html");}
  elseif ($site=="umgebung"){
    include ("b_umgebung.html");}
  elseif ($site=="impressum"){
    include ("b_impressum.html");}
  ?>
  </div>
  <ul id="navi" style="text-align:center;clear:both;">
  <li><a href="home.php?site=impressum">Impressum</a></li>
  <li><a href="home.php?site=kontakt">Kontakt</a></li> 
  </ul> 
  </body>
</html>

Quellcode der CSS
Code: 
  body {
    color: black; background-color: #3366FF;
    font-size: 100.01%;
    font-family:Arial;
    margin: 0; padding: 1em;
  }
  
  body a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #39f;
  }

  ul#navi {
  list-style-type: none;
  font-size: 0.8em;
  padding: 0.2em;
  background-color: #009;
  }
  ul#navi li {
    display: inline;
    margin: 0; padding: 0.5em;
  }

    
  div#inhalt {
    float: left; width:37em;
    margin: 1em 1em 1em 0;
    padding: 0 0 0 1em;
    border: 1px solid black;
    background-color: #39f;
  }
  div#inhalt h2 {
  margin: 0 0 0 0;
  }
  div#inhalt p {
  font-size: 0.8em;
  margin: 0;
  }
  div#inhalt ul {
  list-style-type: none;
  font-size: 0.8em;
  padding: 0.2em;
  }
  div#inhalt li {
    display: block;
    margin: 0; padding: 0em;
  }
  
  div#bilder {
    text-align: center;
    margin: 1em 15em 0 39em;
    padding: 1em;
    border: 1px solid black;
  }
 
  div#info {
    float: right; width: 12em;
    margin: 1em 1em 1em 0;
    padding: 0 0 0 1em;
    border: 1px solid black;
    background-color: #39f;
  }
  
  div#info h2 {
  margin: 0 0 0 0;
  }
  
  p#fusszeile {
    clear: both;
    font-size: 0.8em;
    padding: 0.2em;
    text-align: center;
    background-color: #009;
  }
  p#fusszeile a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #39f;
  }

Any ideas?
 

Anhänge

  • ie.jpg
    ie.jpg
    166,9 KB · Aufrufe: 57
  • ff.jpg
    ff.jpg
    161,4 KB · Aufrufe: 55
Mit Hilfe des Star-HTML-Hacks (* html ...) lassen sich im Stylesheet die erforderlichen Korrekturen für den IE vornehmen.

IE-kompatibler CSS-Code:

Code: 
  * html { overflow: auto; }

  body {
  color: black; background-color: #3366FF;
  font-size: 100.01%;
  font-family:Arial;
  margin: 0; padding: 1em;
  }

  body a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #39f;
  }

  ul#navi {
  list-style-type: none;
  font-size: 0.8em;
  padding: 0.2em;
  background-color: #009;
  }

  * html ul#navi /* IE-Korrektur */
  {
  padding: 0;
  margin: 0;
  }

  ul#navi li {
    display: inline;
    margin: 0; padding: 0.5em;
  }

  * html ul#navi li /* IE-Korrektur */
  {
  margin: 0;
  padding: 0;
  }

  div#inhalt {
    float: left; width:37em;
    margin: 1em 1em 1em 0;
    padding: 0;
    border: 1px solid black;
    background-color: #39f;
  }

  * html div#inhalt /* IE-Korrektur */
  {
  margin: 2em 1em 1em 0;
  }

  div#inhalt h2 {
  margin: 0 0 0 0;
  }
  div#inhalt p {
  font-size: 0.8em;
  margin: 0;
  }
  div#inhalt ul {
  list-style-type: none;
  font-size: 0.8em;
  padding: 0.2em;
  }
  div#inhalt li {
    display: block;
    margin: 0; padding: 0em;
  }

  div#bilder {
    text-align: center;
    margin: 1em 15em 0 38em;
    padding: 0;
    border: 1px solid black;
  }

  * html div#bilder /* IE-Korrektur */
  {
  margin: 3.1em 15em 0 38em;
  }

  div#info {
    float: right; width: 12em;
    margin: 1em 1em 1em 0;
    padding: 0 0 0 1em;
    border: 1px solid black;
    background-color: #39f;
  }

  * html div#info /* IE-Korrektur */
  {
  margin: 2em 0.5em 1em 0;
  }

  div#info h2 {
  margin: 0 0 0 0;
  }

  p#fusszeile {
    clear: both;
    font-size: 0.8em;
    padding: 0.2em;
    text-align: center;
    background-color: #009;
  }
  p#fusszeile a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #39f;
  }
 
Ich bin begeister!

Wie genau setzt man diese "Hacks" ein und was bewirken diese?

Vielen Dank aber schon an dieser Stelle

//edit

Hat sich erledigt, hab's verstanden :)

Ich danke!!
 
Der Star-HTML-Hack dient als CSS-Browserweiche für den Internet Explorer und schließt alle anderen Browser aus.

So lassen sich in dem Selektor * html #ID die erforderlichen Maßkorrekturen notieren, um Unstimmigkeiten / Fehlinterpretationen in der Seitendarstellung aufzuheben. Anmerkung: die Syntax funktioniert auch mit den CSS-Klassen (* html .className).

In deinem Fall hat der IE diverse margin- und padding- Angaben anders / falsch interpretiert und benötigte 'individuelle' Angaben :)
 
Juppa... Genau das habe ich auch gefunden. Habe bei selfHTML nur die falschen Suchbegriffe angegeben (Flüchtigkeitsfehler :eek: ).

Danke Dir!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück