XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS - Background-image im Firefox (http://xhtmlforum.de/showthread.php?t=55629)

djsky 04.02.2009 00:20
CSS - Background-image im Firefox
 
Servus,
habe seit einigen std. ein problem mit meiner CSS datei.

bin dabei eine webseite zu erstellen und firefox zickt rum.

Im ie7 sieht alles in Orndung aus, nur im Firefox 3 habe ich folgendes problem (schaut euch das screenshot an)

ie-screenshot.jpg
firefox-screenshot.jpg

Im IE ist der weise bereich im Hintergrund durchgehent bis unten hin, der Firefox bricht aber diesen weissen bereich ab.

schaut euch auch meine css datei an...


---------------------------------------
---------------------------------------
---------------------------------------

Zitat:
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* body */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
body {
text-align: center;
margin: 0;
padding: 0;
min-height: 100px;
background: url('images/orange_background.png') repeat;
font-size: 68.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000000;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* body */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper { height:100%;
width: 753px;
height:100%;
margin: 0 auto;
background: url('images/background_center.png') repeat-y;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* NAVIGATION-TOP */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#nav-top{
text-align: right;
width: 720px;
margin-right: auto;
margin-left: auto;
padding: 15px 5px 12px 0;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LOGO-BEREICH */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#logo-wrapper{
text-align: right;
width: 741px;
height:40px;
margin-right: auto;
margin-left: auto;
}

#logo{
text-align: left;
width: 251px;
height:220px;
padding-right: 10px;
background: #000000;
margin-right: auto;
margin-left: auto;
float:left;
background: url('images/logo.png') no-repeat;
}

#motto{
text-align: right;
width: 480px;
height:220px;
margin-right: auto;
margin-left: auto;
float:right;
background: url('images/hobel.png') no-repeat;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Content */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#content{
text-align: right;
width: 741px;
margin-right: auto;
margin-left: auto;
}

#content-nav{
text-align: right;
width: 230px;
margin-top: 40px;
margin-right: 25px;
margin-left: auto;
float:left;
}

#content-inhalt{
text-align: justify;
width: 450px;
margin-top: 40px;
margin-right: 24px;
margin-left: 12px;
float:right;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* IMPRESSUM */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#impressum-title{
text-align: justify;
width: 450px;
margin-top: 40px;
margin-right: 24px;
margin-left: 12px;
float:right;
}

#impressum-links{
text-align: left;
width: 220px;
margin-top: 40px;
margin-left: auto;
margin-right: 10px;
float:left;
}

#impressum-rechts{
text-align: links;
width: 220px;
margin-top: 40px;
margin-left: auto;
float:left;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Footer */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer{
text-align: right;
width: 753px;
height:50px;
margin-right: auto;
margin-left: auto;
color: #303030;
float:left;
background: url('images/background_center.png') repeat-y;
}

#copyright{
text-align: right;
width: 235px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
float:left;
}

#line{
text-align: center;
width: 25px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
float:left;
}

#adresse{
text-align: left;
width: 481px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
float:left;
}

br.nav{
line-height:1px;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Links */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

.class1 A:link {text-decoration: none; color: #303030;}
.class1 A:visited {text-decoration: none; color: #303030;}
.class1 A:active {text-decoration: none; color: #999999;}
.class1 A:hover {text-decoration: underline; color: #999999;}

.class2 A:link {text-decoration: underline; color: #303030;}
.class2 A:visited {text-decoration: none; color: #999999;}
.class2 A:active {text-decoration: none; color: #303030;}
.class2 A:hover {text-decoration: none; color: #999999;}
---------------------------------------
---------------------------------------
---------------------------------------

toscho 04.02.2009 01:06
Eine Box mit float:left oder float:right dehnt ihre Elternbox nicht aus, sonder läuft nach unten aus ihr heraus.
Firefox macht es genau richtig, auch du das nicht magst. ;)

Sieh dir Punkt 2 unserer FAQ an, dann ist die Lösung nicht mehr schwer.

Gruß
Thomas

EvT 04.02.2009 01:43
Code:
body {
min-height: 100px;
}

#wrapper {
height:100%;
}

Dieser Code kann nicht wie gewollt funktionieren, denn height: 100% heißt für gute Browser: "Bis hierhin und nicht weiter".
Erfordert der Inhalt mehr Raum, läuft er einfach aus der auf 100% Höhe gesetzten Box heraus. Damit sich diese Box mehr als 100% in der Höhe ausdehnen kann, musst du anders vorgehen. Wie das funktioniert, ist in diesem Artikel in unserer Wiki beschrieben: Seite auf 100% Höhe - XHTMLwiki

Wenn IE 7 die Inhalte in #wrapper trotzdem komplett einfasst, befindet sich dieser Browser wahrscheinlich im Quirksmodus.

djsky 04.02.2009 09:34
moin moin,
habe es ausprobiert wie es mir beschrieben wurde, leider ohne erfolg.

Sorry bin etwas verwirrt.

Aber ich habe gemerkt wen ich im feld

Zitat:
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* body */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper { height:100%;
width: 753px;
height:100%;
margin: 0 auto;
background: url('images/background_center.png') repeat-y;
}
die height entferne und es durch position ersetze sieh hier:

Zitat:
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* body */
/* --------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper {
width: 753px;
margin: 0 auto;
background: url('images/background_center.png') repeat-y;
position:absolute;
}
dann ist der hintere weisse bereich auch bei Firefox und ie durchgezogen so wie ich es haben will.
aber dann ist die seite nicht mittig sondern beim ie auf der rechte seite und beim firefox links


siehe fotos:

IE
FIREFOX

EvT 04.02.2009 13:24
Bevor du dich mit absoluter Positionierung beschäftigst, sorg für ein solides Fundament deiner Site:

1. Stell sicher, dass deine Seite einen Doctype verwendet, der den Browser in den Standards-Modus schaltet.
2. Lies den im Vorposting verlinkten XHTMLWiki-Beitrag. Tipp: Vergleich das Beispiel am Ende des Artikels mit deinem Code.

djsky 04.02.2009 14:02
ok danke fuer die info.
Aber wie komme ich jetzt weiter?

schaue dir bitte die css nochmal an und sag mir was ich aendern muss...

komme leider alleine nicht weiter.

EvT 04.02.2009 14:20
Wiki
Code:
html, body {
        margin:0;
        padding:0;
        height:100%;
        }

#container {
        min-height: 100%;
        }

Dein Code:
Code:
body {
        margin: 0;
        padding: 0;
        min-height: 100px;
        }

#wrapper {
        width: 753px;
        height:100%;
        margin: 0 auto;
        }
Im Wiki-Beispiel heißt das bei dir als #wrapper bezeichnete Element #container.


Vergleich doch einmal die beiden Code-Schnipsel. Fällt dir immer noch nicht auf, was deinem Code fehlt?

Und noch einmal der Hinweis auf den Doctype.

djsky 04.02.2009 21:36
hi sorry weiss leider immer noch nicht was fehlt. komm nicht drauf.
Brauche dringend hilfe.

doctype wurde auch getestet, problem besteht immer noch.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023