• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox: in einem div geht der hintergrund nicht?

K

keksberry

Neues Mitglied
Hey :smile:
ich hab seit kurzem bei meiner Seite ein kleines Problem.
ich kann mich zwar nicht entsinnen, etwas geändert zu haben außer am Inhalt der Seite, aber plötzlich wurde im Firefox (im IE und im phase5 browser schon) der sich wiederholende hintergrund im div "innen" nicht mehr angezeigt.
Meine Seite: [KEKSBERRY.OHOST.DE] I'm going to Vancouver :)
Der CSS Code:
Code: 
.aussen{
    width: 820px;
    margin: 0px auto; /*Zentrierung für andere Browser als IE*/
  }
  .banner{
    width: 820px; height: 479px;
    background: url(bilder/lay.png);
  }
  .innen{
    width: 820px;
    background: url(bilder/bg.png);
    background-repeat: repeat-y;
  }
  .links{
    width: 462px;
    float: left;
    margin: 0 0 0 46px;
    text-align: left;
  }
  .rechts{
    width: 231px;
    float: right;
    margin: 0 46px 0 0;
    text-align: left;
  }
  .unten{
    clear:both;      /*wegen float*/
    background: url(bilder/unten.png);
    width:820px;
    height:30px;
  }

Der HTML Code:
Code: 
<div class="aussen">
<div class="innen">
<div class="banner"></div>

<div class="links">
Inhalt             
</div>

<div class="rechts">
Inhalt
</div>
</div>
<div class="unten"></div>                                        
</div>

Hat jemand eine Idee?

Meine zweite Frage wäre, welchen Doctype ich benutzen soll? Momentan hab ich keinen angegeben.
Danke :smile:
 
Hallo Keksberry,

für deine Seite kannst du maximal HTML4.01 Transitional verwenden.
also
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">

bevor wir der Sache mit dem sich nicht wiederholendem Hintergrund nachgehen, entferne bitte das

<link rel="stylesheet" type="text/css" href="style.css">

aus dem Body der Seite.

Viele Grüße
 
Danke, die Doctype Angabe hab ich eingefügt.
Da ich erst nicht wusste welchen Link im Body-Bereich du meinst, weil mir klar ist, dass der in den Head-Bereich gehört, hab ich im Seitenquelltext im Browser geguckt, und diesen Link zaubert mein Newssystem (Cutenews) anscheinend darein. Ich werd mal nachschauen. oO

Edit: Habe es gefunden und entfernt. Weiß jemand weiter wegen dem Hintergrund?
 
Zuletzt bearbeitet:
.links und .rechts sind gefloatet.
Sie spannen das umliegende Element (.innen) nicht auf.
Z.B mit clear kannst du die Floats einschlissen womit sie .innen auseinanderdrücken.
Eine Möglichkeit:
Code: 
.innen:after {
display: block;
content: "einschliessen";
clear: both;
height: 0;
visibility: hidden;
}

Der Wert von content: " "; ist beliebig.
Nur möglichst kurz sollter er sein.
"." würde reichen.
 
Ok, um den Hintergrund auf die volle Höhe auszudehnen kannst du den Vorschlag von neuroleptika aufgreifen, oder die Klasse .innen durch die Anweisung:
"overflow: hidden" erweitern.

Viele Grüße
 
AGI schrieb:
Ok, um den Hintergrund auf die volle Höhe auszudehnen kannst du den Vorschlag von neuroleptika aufgreifen, oder die Klasse .innen durch die Anweisung:
"overflow: hidden" erweitern.
Zum Vergrößern anklicken....

Stimmt, an overflow hatte ich gar nicht gedacht. Mit hidden hat sich daran nichts geändert, habe aber jetzt overflow: auto; ausprobiert, und jetzt klappts wieder! Danke :smile:
 
hmm, overflow: hidden hätte auch funktionieren müssen. Aber egal....

Wenn du jetzt noch in den <img>-Tags die fehlenden Alt Attribute ergänzt, erfüllst du den HTML 4 Standard.

Und wenn du wirklich Gut sein willst, versuchst du deine Seite auf XHTML Strict umzustellen.

Viele Grüße
 
Um gut zu sein, braucht man kein XHTML. Ob HTML oder XHTML ist nahezu egal, zumal man XHTML 1.1 ja noch gar nicht richtig nutzen kann, weil man die Seiten nicht in XML ausliefern kann (weil dann der IE aufgrund des XML-Prologs in den Quirks Mode springt).

Wichtiger finde ich, dass man eine Strict-Variante nimmt, weil man damit zu sauberem Arbeiten gezwungen wird. Nicht umsonst bedeutet "Transitional" ja "Übergang".
 
AGI schrieb:
Nur sind XHTML-Documente meines Erachtens noch leichter zu lesen und zu "debuggen".
Zum Vergrößern anklicken....
Die Regeln sind für beide Varianten gleich klar.
Für die Entwicklerwerzeuge der jeweiligen Browser macht das keinen Unterschied.

Das Browserverhalten bei overflow: hidden; ist dagegen nicht besonders gradlinig.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben