zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS - Background-image im Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2009, 01:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2009
Beiträge: 4
djsky befindet sich auf einem aufstrebenden Ast
Standard 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;}
---------------------------------------
---------------------------------------
---------------------------------------
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.02.2009, 02:06
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.02.2009, 02:43
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.02.2009, 10:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2009
Beiträge: 4
djsky befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2009, 14:24
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.02.2009, 15:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2009
Beiträge: 4
djsky befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2009, 15:20
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2009, 22:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2009
Beiträge: 4
djsky befindet sich auf einem aufstrebenden Ast
Standard

hi sorry weiss leider immer noch nicht was fehlt. komm nicht drauf.
Brauche dringend hilfe.

doctype wurde auch getestet, problem besteht immer noch.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Frage zu horizontalen Linien marvin1989 CSS 3 30.12.2009 00:35
Float - Probleme wolf1985 CSS 5 19.08.2008 09:14
CSS Hack dalmidog CSS 1 28.03.2008 18:32
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:04 Uhr.