Falsches leeraum im IE6 [gelöst]

E

elite-noob

0
Hallo zusammen,

ich bastel momentan an der Website Waldau allerdings habe ich das Problem das unter dem Banner ein leeraum von ca. 3px dargestellt wird obwohl ich weder margin noch padding an dieser stelle definiert habe, der banner div wurde mit einer höhe von 103px definiert (gleiche höhe wie das eingebundene png)

Weiß einer von euch wo da der fehler liegt? Rufe ich das ganze im Firefox oder Opera auf funktioniert das ganze einwandfrei :/

Auch wird für die Bilder auf der rechten Seite ein Scrollbalken dargestellt obwohl der FF und Opera das nicht der fall ist. Bin langsam am verzweifeln, weis langsam nimmer wonach ich schaun soll...

Hier mal die Index.php
Code: 
<?php
session_start();
    include "config.php"; // die Konfigurationsdateien lesen.
echo "
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<meta name=\"copyright\" content=\"Gästehaus Kurheim Waldau Bad Wörishofen\">
<meta name=\"revisit-after\" content=\"30 days\">
<meta name=\"robots\" content=\"index,FOLLOW\">
<meta name=\"language\" content=\"german deutsch de\">
<meta name=\"abstract\" content=\"Gästehaus Kurheim Bad Wörishofen heißt Sie herzlich Willkommen\">
<meta name=\"description\" content=\"Kurheim Waldau - Bad Wörishofen\">
<meta name=\"keywords\" content=\"Gästehaus Kurheim Waldau,Kurheim,Bad Wörishofen,Waldau,Bad Wörishofen,Wellness,Bayern,Schwaben,Allgaeu,Bad Woerishofen,Sebastian Kneipp,Kneipp,
Kneipp-Kur,Kneippkur,Kur,Urlaub,Erholung,Allgäu,Kurpension,Kuren\">
<meta name=\"author\" CONTENT=\"Kurheim Waldau - Bad Wörishofen\">
<title>Haus Waldau</title>
       <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />\n
</head>
<body>
        <div id=\"Haupt\">
                <div id=\"Navi\">
                        <a href=\"mailto:Rosina.Bisinger@mnet-online.de\">E-Mail</a>  |  <a href=\"index.php?section=impressum\">Impressum</a>  
                </div>
                <div id=\"Banner\">
                  <img src=\"banner-hg.png\">
                </div>
                <div id=\"Navi2\">";
                   include "menue.php"; echo "
                </div>
                <div id=\"Horizontal\">
                </div>";
  IF (isset($_GET['section']) AND $_GET['section']=='buchen')
      {
                echo "<div id=\"Links\" align=\"left\" >";
                   include "links.php"; echo "
                </div>";
      }
   ELSE
      {

                echo "<div id=\"Links\">";
                   include "links.php"; echo "
                </div>";
      }
                echo "<div id=\"Horizontal\">
                </div>
                <div id=\"Rechts\">";
                   include "rechts.php"; echo "
                </div>
                <div id=\"Horizontal\">
                </div>
                <div id=\"Navi\">
                <font size=\"2\">? Kurhotel-garni Haus Waldau ? Mindelheimer Str. 8a ? 86825 Bad Wörishofen ? Telefon: 0 82 47 / 96 63-0 ? Fax: 0 82 47 / 96 63 25  </font>
                </div>
        </div>
</body>
</html> ";
?>

und das Stylesheet

Code: 
body     {
          margin-top: 20px;
          margin: 0;
          padding-bottom: 0;
          font: 90%  arial, hevetica, sans-serif;
          text-align: center;
          color: #432a10;
          background-color: #ffffff; //#f0ef98;
        }
a:visited { color: #f0ef98; text-decoration:none; }
a:active { color: #f0ef98; text-decoration:none; }
a:link { color: #f0ef98; text-decoration:none; }
a:hover { color: #f0ef98; text-decoration:none;}
#Haupt                {
                background-color: #000000;
                margin: auto;
                height: 590px;
                width: 900px;
                }
#Navi                {
                clear: both;
                text-align: right;
                background-color: #860710;
                 padding-top: 5px;
                 padding-bottom: 5px;
                height: 20px;
                 color: #f0ef98;
                }
#Navi2                {
                clear: both;
                text-align: middle;
                background-color: #860710;
                 padding-top: 5px;
                 padding-bottom: 5px;
                height: 20px;
                 color: #f0ef98;
                }
#link:hover        {
                color: #f0ef98; text-decoration:none; font-weight:bold; font-size: 13pt;
                 }
#Banner                {
                background-color: #12aabb;
                height: 103px;
                }
#Horizontal         {
                float:left;
                height: 397px;
                 width: 4px;
                 background-color: #432a10;
                 }
#Links                {
                float: left;
                width: 424px;
                height: 377px;
                background-color: #f0ef98; //#4b9836;
                 overflow: auto;
                 padding: 10px;
        }
#Rechts                {
                float: left;
                width: 444px;
                height: 397px;
                background-color: #f0ef98; //#4b9836;
                 overflow: auto;
        }

Hoffe ihr findet den Fehler

Greetz
chris
 
als allererstes solltest du validen HTML-Code schreiben... er ist zwar FAST valide, aber eben nicht ganz:

du kennst anscheinend nicht den Unterschied zwischen id="blub" und class="blub"....

eine ID darf nur einmal vorkommen;
wenn du einen Style für mehrere Sachen machst, dann nimmst du in der CSS-Datei einen Punkt statt der Raute und weißt dem Element die Style-Klasse mit class="..." zu.

Desweiteren - ohne deinen Code jetzt genauer anzugucken, nur aus Erfahrung - macht der Internetexplorer manchmal schon bei Zeilenumbrüchen irgendwelchen Mist bei pixelgenauem Design und noch dazu kommt, dass der InternetExplorer bis Version 6 das CSS-Box-Modell nicht richtig umsetzt.

http://de.selfhtml.org/css/formate/box_modell.htm

hier solltest du gegebenenfalls also CSS-hacks einsetzen, wobei da schon wieder zu warnen ist:

der InternetExplorer 7 hat das Box Modell richtig implementiert, die Programm-Schwachstellen, die in IE6 dafür sorgen, dass der CSS-Hack zur Ausführung kommt, sind jedoch in IE7 noch immer vorhanden, sodass es gut möglich ist, dass CSS-Hacks gegen Falschdarstellung in IE6 im IE7 auf einmal für Falschdarstellung sorgen.



nebenbei noch eine Anmerkung zur Domain: wenn die 1. Seite seriös wirken soll und 2. bei Google und co. gut gefunden werden soll, sollten auch 2-3 Euro monatlich für Webspace mit PHP + Domain nicht zu viel sein.... ich hoffe, die bplaced.net-Domain ist nur eine Zwischenlösung, bis die Seite komplett fertig ist?!

Und bei den verwendeten Bildern würde ich dir auch raten, welche mit besserer Qualität zu nehmen... Die Banner-Grafik scheint nur mit 8 Bit abgespeichert zu sein (oder die darin verwendeten Bilder...) und das Bild unter Kontakt ist auch mit einem dermaßen bösen Rauschen versehen, ich schätze mal das war eine qualitativ nicht so tolle Handy-Cam?!

Das ist nicht böse gemeint, aber durch solche Kleinigkeiten kann der Eindruck, den man von einem Hotel gewinnt gleich ein ganz anderer sein...

ansonsten schaut die Seite nicht schlecht aus. wobei: man muss doch recht oft scrollen, wo man eigentlich mit weniger Abstand zwischen Formularfeldern und mit etwas kleinerer Schrift Design und Usability noch angenehmer gestalten könnte... und das Navigationsmenü irritiert ein wenig, wenn beim hovern das ganze Menü zuckt.... hier könnte man das Menü in eine Liste (<ul>) packen und die Listen-Elemente (<li>) mit CSS mit display:inline; nebeneinander bringen und dann jedem Listenelement die gleiche feste Breite geben...
 
Also das mit dem IE Hack habe ich probiert hat aber an der stelle nicht viel gebracht gehabt.

Die korrektur mit den "id=..." und "class="..." habe ich gemacht, kannte den unterschied wirklich nicht, habe mir css so nebenbei "beigebracht" aber halt nie wirklich gelernt. Danke an der Stelle für den Hinweis.

Der entscheidende Hinweis war das der IE auf Zeilenumbrüche reagiert, habe da die stelle

Code: 
                <div id=\"Banner\">
                  <img src=\"banner-hg.png\">
                </div>

so rum umgeschrieben

Code: 
                <div id=\"Banner\">
                  <img src=\"banner-hg.png\"></div>

Jetzt funktionierts wieder :)

greetz
chris
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben