Stephan: Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

SELF-Forum

Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

Stephan
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe das Layout einer Web-Seite nicht mit Tabellen, sondern mit Ebenen erstellt. Die Ebenen werden im IE korrekt angezeigt. Lediglich der Titel wird nicht vertikal zentriert, obwohl 'vertical-align:middle' gesetzt wurde.
Betrachtet man die Seite in Firefox bzw. Netscape wird fast nichts mehr korrekt angezeigt. :-(

Die CSS-Datei ist wie folgt aufgebaut:

body {
margin:10px;
padding:0px;
background-color:#E5E5E5;
color:#000000;
}
#mainframe{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  width:900px;
  background-color:#7F9DB9;
  border: #006699 1px solid;
  margin-left:auto;
  margin-right:auto;
}
#header{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  background-color:#006699;
  height:60px;
  margin-left:auto;
  margin-right:auto;
}
#header h1{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 10px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 14pt;
  font-weight: bold;
  color: #ffffff;
  background-color : transparent;
  vertical-align:middle;
}
#subframe{
  margin: 0px 0px 0px 0px;
  padding:2px 2px 2px 2px;
  width:896px;
  background-color:#ffffff;
}
#navigation{
  margin: 0px 0px 0px 0px;
  padding:2px 2px 2px 2px;
  width: 200px;
  background-color:#ffffff;
  float:left;
}
#content{
  margin: 2px 0px 0px 0px;
  padding:5px 5px 5px 5px;
  width: 680px;
  height:500pX;
  background-color:#EFEFEF;
  color:#000000;
  border: #006699 1px solid;
  float:right;
}
#content p{
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}
#navigation a:link {
  display:block;
  width:182px;
  background-color: white;
  color: black;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  text-decoration:none;
  margin: 2px 2px 2px 2px;
  padding:6px 6px 6px 6px;
  border: #006699 1px solid;
}
#navigation a:visited {
  display:block;
  width:182px;
  background-color: white;
  color: black;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  text-decoration:none;
  margin: 2px 2px 2px 2px;
  padding:6px 6px 6px 6px;
  border: #006699 1px solid;
}
#navigation a:active {
  display:block;
  width:182px;
  background-color: white;
  color: black;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  text-decoration:none;
  margin: 2px 2px 2px 2px;
  padding:6px 6px 6px 6px;
  border: #006699 1px solid;
}
#navigation a:hover{
  display:block;
  width:182px;
  background-color : #EFEFEF;
  color : black;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  font-weight:normal;
  text-decoration:none;
  margin: 2px 2px 2px 2px;
  padding:6px 6px 6px 6px;
  border: #006699 1px solid;
}

Die Web-Seite wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title></title>
  <link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mainframe">
  <div id="subframe">

<div id="header">
      <h1>Titel</h1>
    </div>

<!-- Navigation -->
    <div id="navigation">
      <a  href="">Schaltfläche 1</a>
      <a  href="">Schaltfläche 2</a>
    </div>

<!-- Content -->
    <div id="content">
      <p>
         Content
      </p>
    </div>
  </div>
</div>

</body>
</html>

Da ich schon mehrere Tage an der Lösung des Problems sitze, würde ich mich über einen Tipp freuen.

DANKE!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

    Alexander Brock
    – Informationen zu den Bewertungsregeln

    Hallo Stephan,

    margin:0px 0px 0px 0px;

    Das ist äquivalent zu margin: 0;

    border: #006699 1px solid;

    Es muss "border: 1px solid #006699;" heißen.
    Wegen diesem Fehler werden u.U. alle weiteren
    Definitionen ignoriert.

    BTW: Eine Beispielseite wäre hilfreich.

    Gruß
    Alexander Brock

    --
    SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
    http://againsttcpa.com
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      border: #006699 1px solid;
      Es muss "border: 1px solid #006699;" heißen.

      Warum?

      'border'
          Value:   [ <'border-width'> || <'border-style'> || <color> ] | inherit

      Several juxtaposed words mean that all of them must occur, in the given order.

      A bar (|) separates two or more alternatives: exactly one of them must occur.

      A double bar (||) separates two or more options: one or more of them must occur, in any order.

      Brackets ([ ]) are for grouping.

      Es kann also entweder das aus der [] oder inherit vorkommen. Inherit interessiert hier nicht, also gucken wir den Inhalt von [] an:
      <'border-width'> || <'border-style'> || <color>

      Da wird der double bar verwendet, daraus folgt: Reihenfolge egal ("in any order").

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

    Auge
    – Informationen zu den Bewertungsregeln

    Hallo

    #header{
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      background-color:#006699;
      height:60px;
      margin-left:auto;
      margin-right:auto;
    }
    #header h1{
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 10px;
      font-family: "Arial", "Helvetica", sans-serif;
      font-size: 14pt;
      font-weight: bold;
      color: #ffffff;
      background-color : transparent;
      vertical-align:middle;
    }

    Was die falsch ausgerichtete Überschrift betrifft, mit deinen Angaben zu #header h1 klebst du sie selbst in die linke obere Ecke. h1 steht ohne margin und padding in #header, ist also automatisch nur so groß, wie es die Schrifgröße erfordert. Nimm mal testweise eine Höhe von 100% des umgebenden Elements (<div id="header">) zu deinen Angaben dazu, und spiel mit dem padding rum, dann solltest du sehen, was ich meine.

    Grundsätzlich wäre aber noch hinzuzufügen, dass du die Überschrift selbst genauso formatieren kannst, so mit Höhe und Breite und Farben etc., wie das div. Du brauchst letzteres also eigentlich nicht.

    Was die Verschiebung der Links in der Navigation betrifft, du bist dem Boxmodelbug des MSIE aufgesessen. Dieser rechnet padding, border und margin _außen_ auf die Breite/Höhe eines Elements drauf. Dies entspricht nicht den Regeln, wie sie für CSS festgelegt sind. Der Mozilla/Firefox rechnet Standardkonform, womit z.B. deine Linkkästen dort schmaler sind.

    Tschö, Auge

    --
    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
    (Victor Hugo)
    Veranstaltungsdatenbank Vdb 0.1
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

      Detlef G.
      – Informationen zu den Bewertungsregeln

      Hallo Auge

      Was die Verschiebung der Links in der Navigation betrifft, du bist dem Boxmodelbug des MSIE aufgesessen. Dieser rechnet padding, border und margin _außen_ auf die Breite/Höhe eines Elements drauf.

      Das tut er im Standardmodus, genau wie z.B. Mozilla, so ist es richtig.

      ... Der Mozilla/Firefox rechnet Standardkonform, womit z.B. deine Linkkästen dort schmaler sind.

      Also bei mir sind sie im Mozilla genauso breit wie im IE 6.0.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Darstellungsprobleme mit Ebenen (Layer) bei Firefox/Netscape

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo,

    Hallo zusammen,

    ich habe das Layout einer Web-Seite nicht mit Tabellen, sondern mit Ebenen erstellt. Die Ebenen werden im IE korrekt angezeigt. Lediglich der Titel wird nicht vertikal zentriert, obwohl 'vertical-align:middle' gesetzt wurde.

    Blockelemente kennen kein vertical-align, du solltest mit padding arbeiten.

    Betrachtet man die Seite in Firefox bzw. Netscape wird fast nichts mehr korrekt angezeigt. :-(

    So groß sind die Unterschiede gar nicht.

    #navigation{
      ...
      float:left;
    }
    #content{
      ...
      float:right;
    }

    Der Inhalt von #subframe sind zwei gefloatete Divs. Float nimmt diese aus
    dem Elementefluss, sie haben damit keinen Einfluss mehr auf die Höhe von
    ungefloateten Blockelementen.
    Du brauchst innerhalb von #subframe nach allen anderen Elementen ein
    Element, welches das Floaten beendet (Fortsetzung bei Textumfluss).

    Außerdem kannst du noch aufräumen:
    Du brauchst z.B. nicht alles in ein extra Div zu packen.
    Wozu du #mainframe _und_ #subframe brauchst ist mir ein Rätsel.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln