Darstellung "background-image" im Firefox aber nicht im IE von Sel1337, 01.05.2015 19:12

Darstellung "background-image" im Firefox aber nicht im IE

Sel1337 01.05.2015 17:57

browser
css

Hi liebe Community,

bin gerade dabei an meiner ersten Webseite herumzubasteln, doch jetzt bin ich auf ein Problem gestoßen das ich nicht lösen kann.

Und zwar möchte ich, das in diesem 3 Spalten Layout, sollte ein Container eine bestimmte Größe überschreiten die weiße Fläche mit Hilfe des "backround-images" aufgefüllt wird. Dazu habe ich ein 1200x1px großes Bild erstellt, dass funktioniert auch im Firefox wunderbar nur im IE geht es nicht und ich finde keine Lösung. Wird mich sehr freuen auf eine hilfreiche Antwort freuen.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=1200" name="viewport" />
<title>Ohne_Titel_1</title>
<style>
body {
	margin: 10px auto;
	padding: 0px;
	width: 1200px;
	font-family: sans-serif;
}
header {
	background: fuchsia;
	border: thin blue solid;
}
main {
	min-height: 775px;
	background-image: url('../img/background/background_wrapper.jpg');
	background-color: fuchsia;
}
#navtop {
	background: fuchsia;
	text-align: center;
	list-style: none;
}
#navtop li {
	display: inline;
}
#navmain {
	float: left;
	width: 230px;
	min-height: inherit;
	padding: 10px;
	background-color: aqua;
}
article {
	float: left;
	width: 670px;
	min-height: inherit;
	padding: 10px;
	border-left: 2px white solid;
	background-color: green;
}
aside {
	text-align: center;
	float: left;
	width: 238px;
	min-height: inherit;
	padding: 10px;
	color: #FFDF00;
	font-weight: bold;
	background-color: maroon;
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
</style>
</head>

<body>

<header>
	<nav id="navtop">
		<ul>
			<li><a href="default.php">Home</a></li>
			<li>|</li>
			<li><a href="kontakt.php">Kontakt</a></li>
			<li class="nav-line">|</li>
			<li>|</li>
			<li><a href="impressum.php">Impressum</a></li>
		</ul>
	</nav>
</header>
<main class="clearfix">
<nav id="navmain">
	Navigation Links
</nav>
<article>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
	tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
	no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
	labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
	et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
	sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
	sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
	magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
	dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
	Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
	elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
	Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
	amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
	eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
	no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
	labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
	et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
	sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
	sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
	magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
	dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
	Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
	elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
	Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
	amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
	eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
	no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
	labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
	et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
	sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
	sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
	magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
	dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
	Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
	elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
	Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
	amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
	eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
	no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
	labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
	et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
	sanctus est Lorem ipsum dolor sit amet.
</article>
<aside>
	Seite rechts
</aside>
</main>
<footer>
</footer>

</body>

</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

MrMurphy1 01.05.2015 18:25

browser
css

– Informationen zu den Bewertungsregeln

Hallo,

ein Link zur Seite wäre besser. So fehlt uns zum Beispiel das Hintergrundbild.

Aber ich kann auch deiner Problembeschreibung nicht folgen.

sollte ein Container eine bestimmte Größe überschreiten die weiße Fläche mit Hilfe des "backround-images" aufgefüllt wird.

Ich sehe nur ein starres Layout, was für eine Größe soll sich da ändern? Von welchem Container?

Gruss

MrMurphy

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

Sel1337 01.05.2015 19:12

browser
css

– Informationen zu den Bewertungsregeln

Ich sehe nur ein starres Layout, was für eine Größe soll sich da ändern? Von welchem Container?

Der Inhalt der grünen Box ist momentan über "min-hight" so ist der grüne Container größer wie die anderen, aber die Container links und rechts passen sich dann nicht an die Höhe des grünen an. So wollte ich halt ein Hintergrundbild einfügen in "main" so das es ein einheitlichen Farbverlaufgibt.

Ich dachte mir das so wie hier, http://www.ohne-css.gehts-gar.net/0005.php

Sry mit weiß mein ich Fuchsia :), hatte es zuerst nicht eingefärbt

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

MrMurphy1 01.05.2015 20:04

browser
css

– Informationen zu den Bewertungsregeln

Hallo

warum setzt du nicht flexbox ein wenn du eh' schon HTML5 nutzt? Das ist doch genau für solche Wünsche erdacht worden. Außerdem könntest du deine Seite viel flexibler machen, zum Beispiel auf die starren 1200px verzichten.

Du kannst ja mal dein CSS durch das folgende ersetzen:

      body {
         margin: 10px auto;
         padding: 0px;
         width: 1200px;
         font-family: sans-serif;
      }
      header {
         background: fuchsia;
         border: thin blue solid;
      }
      #navtop {
         background: fuchsia;
         text-align: center;
         list-style: none;
      }
      #navtop li {
         display: inline;
      }
      main {
         background-color: fuchsia;
         display: flex;
      }
      #navmain {
         width: 20%;
         padding: 10px;
         background-color: aqua;
      }
      article {
         width: 60%;
         padding: 10px;
         border-left: 2px white solid;
         background-color: green;
      }
      aside {
         width: 20%;
         text-align: center;
         padding: 10px;
         color: #FFDF00;
         font-weight: bold;
         background-color: maroon;
      }

Mit flexbox könntest du auch in der #navtop auf die senkrechten Striche als li-Element verzichten, die dort nun mal gar nichts zu suchen haben.

Gruss

MrMurphy

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

Gunnar Bittersmann Homepage des Autors 01.05.2015 20:12

– Informationen zu den Bewertungsregeln

@@MrMurphy1

warum setzt du nicht flexbox ein wenn du eh' schon HTML5 nutzt?

Was hat Flexbox (ein CSS-Feature) mit HTML5 zu tun?

Außerdem könntest du deine Seite viel flexibler machen, zum Beispiel auf die starren 1200px verzichten.

Darauf sollte man verzichten. Die Viewports vieler (der meisten) Nutzer sind schmaler als 1200px.

Mit flexbox könntest du auch in der #navtop auf die senkrechten Striche als li-Element verzichten, die dort nun mal gar nichts zu suchen haben.

Das haben sie nicht. Aber was hat Flexbox damit zu tun?

LLAP

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

Sel1337 02.05.2015 15:25

– Informationen zu den Bewertungsregeln

Ich hab jetzt auch die Lösung gefunden zu meinem Quellcode, das liegt irgendwie an der Voreinstellung des "main" Elements verwendet man <div id="wrapper"> funktioniert es oder man kann den CSS-Code "main" mit "Display:block" ergänzen.

Vielen vielen Dank Murphy für die Mühe und die tolle Lösung! Kann ich das bezüglich der Abwärtskompatibilität jetzt schon benutzen?

Mit flexbox könntest du auch in der #navtop auf die senkrechten Striche als li-Element verzichten, die dort nun mal gar nichts zu suchen haben.

Wie macht man das den sonst?

Darauf sollte man verzichten. Die Viewports vieler (der meisten) Nutzer sind schmaler als 1200px.

Wenn man auf so ein starres Layout setzt, sollte man dann immer noch auf 960px setzen?

Beitrag melden

– Informationen zu den Bewertungsregeln

Darstellung "background-image" im Firefox aber nicht im IE

MrMurphy1 02.05.2015 15:54

– Informationen zu den Bewertungsregeln

Hallo

Vielen vielen Dank Murphy für die Mühe und die tolle Lösung! Kann ich das bezüglich der Abwärtskompatibilität jetzt schon benutzen?

Ja. Wenn du auch etwas ältere Browser unterstützen willst kannst du noch ein paar Prefixe hinzufügen, wobei der Autoprefixer dies halbwegs automatisch erledigt:

Linkbeschreibung

Browser, die mit Flexbox nichts anfangen können, sind heutzutage bedeutungslos und werden nur noch von Fortschrittsgegnern als "Argument" ins Feld geführt.

Wie macht man das den sonst?

Indem für die senkrechten Striche die border-Anweisung eingesetzt wird.

Der html-Teil könnte dann folgendermaßen aussehen:

   <header>
      <nav id="navtop">
         <ul>
            <li><a href="default.php">Home</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="impressum.php">Impressum</a></li>
         </ul>
      </nav>
   </header>

und der CSS-Teil dazu

      header {
         background: fuchsia;
         padding: 0.2rem 0;
         /*border: thin blue solid;*/
      }
      #navtop {
         background: fuchsia;
         text-align: center;
         list-style: none;
      }
      #navtop ul {
         display: flex;
         justify-content: center;
      }
      #navtop li {
         list-style-type: none;
         border-right: 1px solid black;
         padding: 0 10px;
      }
      #navtop li:last-child {
         border-right: none;
      }
      #navtop li a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 0 10px;
      }

Zusätzliche Links könntest du dann einfach hinzufügen.

Wenn man auf so ein starres Layout setzt, sollte man dann immer noch auf 960px setzen?

Nein, Webseiten haben keine Größe. Die Besucher haben in ihrem Browser eine ihnen genehme Fensterbreite aufgezogen und es spricht nichts dagegen, diese auch für den Inhalt zu nutzen.

Das könnte dann insgesamt so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Gleichlange Spalten</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         font-family: sans-serif;
         width: 98%;
         padding: 0px;
         margin: 10px auto;
      }
      header {
         background: fuchsia;
         padding: 0.2rem 0;
         /*border: thin blue solid;*/
      }
      #navtop {
         background: fuchsia;
         text-align: center;
         list-style: none;
      }
      #navtop ul {
         display: flex;
         justify-content: center;
      }
      #navtop li {
         list-style-type: none;
         border-right: 1px solid black;
         padding: 0 10px;
      }
      #navtop li:last-child {
         border-right: none;
      }
      #navtop li a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 0 10px;
      }
      main {
         background-color: fuchsia;
         display: flex;
      }
      #navmain {
         width: 20%;
         padding: 10px;
         background-color: aqua;
      }
      article {
         width: 60%;
         padding: 10px;
         background-color: green;
      }
      aside {
         width: 20%;
         text-align: center;
         padding: 10px;
         color: #FFDF00;
         font-weight: bold;
         background-color: maroon;
      }
   </style>
</head>
<body>
   <header>
      <nav id="navtop">
         <ul>
            <li><a href="default.php">Home</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="impressum.php">Impressum</a></li>
         </ul>
      </nav>
   </header>
   <main>
      <nav id="navmain">
         Navigation Links
      </nav>
      <article>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
      sanctus est Lorem ipsum dolor sit amet.
      </article>
      <aside>
         Seite rechts
      </aside>
   </main>
   <footer>
   </footer>

</body>
</html>

Für schmale Fensterbreiten müsste dann per Responsive Design über MediaQueries für eine sinnvolle Aufteilung gesorgt werden.

Gruss

MrMurphy

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Sel1337: Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE

Darstellung "background-image" im Firefox aber nicht im IE