Firefox-Probleme (Margin, center, background)

[tattooz]

Hallo zusammen,

nachdem mein erstes Problem schnell gelöst werden konnte, hab ich jetzt glaub ich etwas schwerwiegenderes, bei dem ich wieder auf euch hoffe.

***************************************************

Problem 1: (Container "#complete")
IE zeigt den o. g. Container (der die ganze Breite des Fensters darstellen soll) "zentriert" an, wie in der CSS Datei angegeben, der Firefox positioniert ihn aber trotzdem links.

Wie kann ich dies auch im Firefox zentriert darstellen?

***************************************************

Problem 2: (Container "#haupt")
Im IE wird das Hintergrundbild aus dem Container dargestellt, im Firefox nicht.

Woran könnte das liegen?

***************************************************

Problem 3:
(div "menu_l" -> index.php, css ; div.navi-Klasse in der CSS, menu_l.php->Klassenaufruf)

Mein Menü links wird völlig unterschiedlich dargestellt im IE / Firefox. Ich blick überhaupt nicht mehr durch, welche Margin-Angaben wo hin kommen, damit es gleich aussieht, bzw. ob das überhaupt geht.

Bitte helft mir, auch wenn die Dateien etwas länger sind, bin echt am verzweifeln.

- Gibt es eine Möglichkeit für die beiden Browser eine gleiche Ausgangsbasis zu schaffen?
- Wo geb ich die richtigen Margin- bzw. Padding-Angaben an, damit 10 px Abstand der li-Tags vom Rand des Containers und 10px Abstand der ul-Tags von den li-Tags erreicht werden können und es in beiden Browsern gleich aussieht.

Vielen Dank für eure Hilfe und Mühe!

Gruß

Stefan


CSS-Datei:

@charset "ISO-8859-1";

<style>
/* CSS Document */

/* Allgemeines */

body {
    font-family: Verdana;
    }

/* Links */
a:visited {text-decoration: none; color:#000;}
a:link     {text-decoration: none; color:#000;}
a:active {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}

/*____________________________________________________________*/

/* Aufbau */

#complete {
    text-align: center;
    }

#main {
    width: 770px;
    }

/* Headerbereich */

#header {
       width: 770px;
    height: 75px;
    text-align:center;
    vertical-align: middle;
    }

/* Menubereich */

#menu {
       width: 770px;
    height: 55px;
    text-align: left;
    }

/* Bildbereich */

#bild {
       width: 770px;
    height: 195px;
    text-align:center;
    vertical-align: middle;
    background-color: #000000;
    }

/* Mainbereich */

#haupt {
       width: 770px;
    background:url(pics/main_bg.jpg);
    }

/* Menubereich links*/

#menu_l {
       width: 187px;
       float: left;
    text-align: left;
    margin-left: 3px;
    }

/* Inhalt der Seite */


#inhalt {
    width: 570px;
    text-decoration: none;
    text-align: left;
    float: left;
        }


/* Fusszeile */

#footer {
    width: 770px;
    height: 46px;
    text-align: left;
    background-color: #00FF55;
    clear: left;
    }

/* Dropdown-Steuerung Hauptmenue */


/* -------------------------- Beginn der nicht veraenderbaren Dateien --------------------------- */

ul.dropdown {
    list-style: none;
    width:100%;
    z-index:99;
    margin:0;
    padding:0;
    text-decoration:none;
    }

ul.dropdown * ul {
    list-style: none;
    display:none;
    position:absolute;
    z-index:99;
    width:20em;
    margin:0;
    padding: 0;
    text-decoration:none;
    }

ul.dropdown li {
    float:left;
    text-decoration:none;
    }

ul.dropdown li * li {
    border:1px solid #fff;
    float:none;
    position: relative;
    text-decoration:none;
    }

ul.dropdown ul * ul {
    left:98%;
    top:0;
    text-decoration:none;

    }

ul.dropdown a {
    display:block;
    text-decoration:none;
    }

ul.dropdown ul * a {
    height:100%;
    text-decoration:none;
    }

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
    display:none;
    text-decoration:none;
    }

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
    display:block;
    text-decoration:none;
    }

/* -------------------------- Ende der nicht veraenderbaren Dateien --------------------------- */

ul.dropdown a {
    font-family: Verdana;
    font-size: 12px;
    color:#444;
    padding:4px;
    text-decoration:none;
    width: 120px;
    text-align: center;
    text-decoration:none;
    }

ul.dropdown a:hover {
    background-color:#444;
    color:#fff;
    width: 120px;
    text-decoration:none;
    }


ul.dropdown ul {
    border:1px;
    width: 130px;
    text-decoration:none;
    }

ul.dropdown ul a {
    background-color:#ecebe6;
    color:#000;
    padding:4px;
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    }

ul.dropdown ul a:hover {
    background-color:#ffffff;
    color:#840305;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration:none;
    }

ul.dropdown ul li {
    background-color:#ccc;
    border-color: #666666;
    border-bottom-width: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration:none;
    }

/*____________________________________________________________*/

/* Menue links */

div.navi li ul 
{
    margin: 0; 
    padding: 0;
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    font-weight:normal;
    text-decoration:none;
    list-style:square;
    padding-left: 30px;
}

div.navi li a
{
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    font-weight:normal;
    text-decoration:none;
    list-style:square;
}

div.navi li a:hover
{
    font-family: Verdana;
    font-size: 11px;
    font-weight:normal;
    color:#666;
    text-decoration:none;
    list-style:square;
    
}

div.navi li 
{
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    text-decoration:none;
    list-style:square;
    list-style-color:#000;
    padding-left:4px;
}

div.navi span
{
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    color:#840204;
    text-decoration:none;
}

/*____________________________________________________________*/

/* Sonstige Formatierungen */

div.seiten {
    padding-top: 17px;
    font-family: Verdana;
    font-size: 11px;
    text-decoration: none;
    color: #000;
}

div.seiten li {
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    text-decoration:none;
    list-style:square;
    list-style-color:#000;
    padding-left:4px;
}

div.text {
    padding-top: 17px;
    font-family: Verdana;
    font-size: 11px;
    text-decoration: none;
    color: #000;
}

div.text li {
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    text-decoration:none;
    list-style:square;
    list-style-color:#000;
    padding-left:4px;
}

div.text a {
    font-family: Verdana;
    font-size: 11px;
    color:#000;
    text-decoration:none;
}

div.text b {
    font-family: Verdana;
    font-size: 11px;
    color:#840204;
    text-decoration:none;
}

.formular {
    border-bottom: 1px;
    border-bottom-style: solid;
    border-bottom-color: #840204;
    height: 30px;
}

table {border:none; border-collapse:collapse;}



/* Stellvertretung Tabelle */
.sv {
    padding-left: 5px;
    padding-top: 5px;
    border-right-width: 3px;
    border-right-color: #FFF;
    border-right-style: solid;
    border-bottom-width: 20px;
    border-bottom-color: #FFF;
    border-bottom-style: solid;
    background: #ddded9;
    text-align: left;
    vertical-align: top;
}

/* Ansprechpartner Tabelle */
.ap {
    padding-left: 5px;
    padding-top: 5px;
    border-right-width: 3px;
    border-right-color: #FFF;
    border-right-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #FFF;
    border-bottom-style: solid;
    background: #ddded9;
    text-align: left;
    vertical-align: top;
}

/* Ansprechpartner Bildbox */
.bi {
    padding-left: 5px;
    padding-top: 5px;
    border-right-width: 3px;
    border-right-color: #FFF;
    border-right-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #FFF;
    border-bottom-style: solid;
    background: #ddded9;
    text-align: center;
    vertical-align: top;
}


/* Schriftformatierungen */

h1 {
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    color:#840204;
    text-decoration:none;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 13px;
}

h2 {
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    color:#840204;
    text-decoration:none;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 3px;
}

h3 {
    font-family: Verdana;
    font-size: 8pt;
    font-weight: none;
    color:#000000;
    text-decoration:none;
    padding-top: 0;
    margin-top: 0;
}

/* Formularsettings */

/* Trennlinien */

hr {
    color: #840204;
    width: 300px;
    height: 1px;
    border: none;
    }

</style> 

PHP-Datei

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    <title>Gemeinde Dietramszell</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    </head>
    
    <body background="pics/background.gif">
    
    <div id="complete">&nbsp;
    
        <div id="main"> 
    
            <div id="header">
                <?php
                include "header.php";
                ?>
            </div>

            <div id="menu" style="background-image:url(pics/hauptmenu_bg.jpg);">
                <?php
                include "hauptmenu.php";
                ?>
            </div>

            <div id="bild" style="background-image:url(pics/header_bild.jpg);">
                &nbsp;
            </div>
        
            <div id="haupt" style="background:url(pics/main_bg.jpg)">
                  <div id="menu_l">
                <?php
                    include "menu_l.php";
                    ?>
                </div>

                <div id="inhalt">
                    <?php
                    include "inhalt.php";
                    ?>
                </div>
            </div>
            
            <div id="footer">
                <?php
                include "footer.php";
                ?>
            </div>

        </div>

    </div>
    
    </body>
</html>

[tattooz]

Anbei noch die Anzeige im Firefox.

Container wird ganz links am Rand angezeigt, anstatt zentriert.

Der Text liegt links außerhalb des Containers "menu_l".

[TobiaZ]

Wie kann ich dies auch im Firefox zentriert darstellen?

vermutlich margin:0 auto;

Aber deinen Quellcode wird sich sicher mal wieder keiner durchlesen, bei der Masse. Daher kann ich auf Anhieb auch nichts zu den anderen Problemen sagen.

[brauni54]

wegen deinem hintergrundbild, nimm mal lieber:
background-image: url();

[brauni54]

aso wegen deinen margin angaben.
generell würde ich an deiner stelle immer margin:0 angeben wenn keine abstände gewünscht sind. falls doch dann halt margin: oben rechts unten links;
ich habe schon öfter mitbekommen, wenn margin:0; weggelassen wird dann spinnt der IE eben rum. vielleicht ist das ja ein ansatz für dich.

sonsten kürze doch bitte deinen code auf das wesentliche, denn da geb ich Tobiaz recht, das liest sich niemand durch...

[tattooz]

Hallo zusammen,

habe nun selbst nach langem Forschen die Fehler gefunden, für alle, die mal die selben Probleme haben hier die Lösung:

Problem 1:
Der DIV-Container "complete" ist eigentlich überflüssig, sofern dort keine Einträge erfolgen sollen. Somit ist der Container "main" der oberste und der muss folgende Einträge erhalten:

margin-left: auto;
margin-right: auto;

Damit wird der Main-Container zentriert im Firefox und IE.

Problem 2:
In der index.php muss im DIV-Bereich "haupt" bevor das DIV-Tag geschlossen wird folgender Eintrag erfolgen:

<br style="clear:both;" />

Dann wird das Bild auch im Firefox angezeigt.

Problem 3:
Kann euch folgenden Tip geben:
Hatte mir das Layout nochmals ohne den ganzen Schnickschnack angelegt, also nur die DIV´s in die Styles.css und jedem DIV eine andere Farbe zugeordnet. Hab dann dort den margin-Angaben gespielt.
Fazit: Über die Verschachtelung der DIV´s
<haupt>
--> <menu_l>
--> <inhalt>
kann man den DIV´s "menu_l" und "inhalt" ein margin-left setzen und es wird dann bei beiden Browsern gleich angezeigt. Der haupt-DIV bekommt keine Zuweisung. Wenn man dann dem Haupt-DIV ein Hintergrundbild zuordnet, können die beiden untergeordneten DIV´s rein zur Formatierung wunderbar verwendet werden.

Hoffe, dass ich vielleicht künftig jemandem damit helfen kann.

Gruß

Tattooz

[tattooz]

Vielen Dank natürlich noch an alle Helfer!