Fabienne: Frage zum Style

SELF-Forum

Frage zum Style

Fabienne
– Informationen zu den Bewertungsregeln

Hallo und guten Morgen,

ich habe folgendes Problem: in dem "CONTAINER" wird das Hintergrund-Bild nur im IE, nicht aber im Safari angzeigt.
Sieht jemand von Euch meinen Fehler?

<div id="container">

#CONTAINER
{ text-align: left; margin: 0 auto; width: 960px; padding: 0px 10px 0px 10px; background:url('bilder/layout/bg_container.gif') no-repeat top center; margin-top: 0px; margin-bottom: 0px; }

Besten Dank
Fabienne

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Frage zum Style

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe folgendes Problem: in dem "CONTAINER" wird das Hintergrund-Bild nur im IE, nicht aber im Safari angzeigt.

    nur das Hintergrundbild? Oder werden die anderen Eigenschaften auch nicht angewendet?

    Sieht jemand von Euch meinen Fehler?

    Nein, der Code scheint für sich betrachtet korrekt. Aber vielleicht ist Safari der -durchaus richtigen- Ansicht, dass "CONTAINER" etwas anderes ist als "container".

    #CONTAINER
    { text-align: left; margin: 0 auto; width: 960px; padding: 0px 10px 0px 10px; background:url('bilder/layout/bg_container.gif') no-repeat top center; margin-top: 0px; margin-bottom: 0px; }

    Und eine etwas übersichtliche Schreibweise wäre wünschenswert. Eine CSS-Eigenschaft pro Zeile hat sich eigentlich bewährt.

    Schönes Wochenende,
     Martin

    --
    Um die Wahrheit zu erfahren, muss man den Menschen widersprechen.
      (George Bernhard Shaw)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zum Style

      Fabienne
      – Informationen zu den Bewertungsregeln

      Hallo Martin

      nur das Hintergrundbild? Oder werden die anderen Eigenschaften auch nicht angewendet?

      Es geht nur um das HG Bild.

      Nein, der Code scheint für sich betrachtet korrekt. Aber vielleicht ist Safari der -durchaus richtigen- Ansicht, dass "CONTAINER" etwas anderes ist als "container".

      Jop, hab ich auch shcon versucht. Alle denkbaren Schreibweisen.
      Da aber die anderen Eigenschaften übernommen werden, kann es daran nicht liegen.

      Und eine etwas übersichtliche Schreibweise wäre wünschenswert. Eine CSS-Eigenschaft pro Zeile hat sich eigentlich bewährt.

      Jop. Habe mir das irgendwann mal angwöhnt alles in einer Zeile zu schreiben,
      weil man z.B. bei NAVIs mit unterschiedlichen Farben schneller die Unterschiede sieht... z.B.
      #navi    {color:#FFFF00; padding ....}
      #navi_on {color:#000000; padding ....}

      Beste Grüße
      Fabienne

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zum Style

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hi,

        »» nur das Hintergrundbild? Oder werden die anderen Eigenschaften auch nicht angewendet?
        Es geht nur um das HG Bild.

        okay, dann kann es nicht das Problem der Groß/Kleinschreibung sein.
        Was ist mit den Anführungszeichen innerhalb von url()? Ich entsinne mich, dass der eine oder andere Browser die nicht haben will und habe mir daher inzwischen angewöhnt, das Argument ohne Anführungszeichen zu schreiben.

        »» Und eine etwas übersichtliche Schreibweise wäre wünschenswert. Eine CSS-Eigenschaft pro Zeile hat sich eigentlich bewährt.
        Jop. Habe mir das irgendwann mal angwöhnt alles in einer Zeile zu schreiben, weil man z.B. bei NAVIs mit unterschiedlichen Farben schneller die Unterschiede sieht... z.B.
        #navi    {color:#FFFF00; padding ....}
        #navi_on {color:#000000; padding ....}

        Ist'n Argument, ja.
        Der Schuss geht aber nach hinten los, sobald die Zeilen umgebrochen werden, so wie hier im Posting-Text. Dann wird's unübersichtlich.

        So long,
         Martin

        --
        Wenn man keine Ahnung hat - einfach mal Fresse halten.
          (Dieter Nuhr, deutscher Kabarettist)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Frage zum Style

          Fabienne
          – Informationen zu den Bewertungsregeln

          Hello again,

          Was ist mit den Anführungszeichen innerhalb von url()? Ich entsinne mich, dass der eine oder andere Browser die nicht haben will und habe mir daher inzwischen angewöhnt, das Argument ohne Anführungszeichen zu schreiben.

          Habe ich auch getestet. (Es gibt auch ein HG Bild im BODY. Das ist eaxt gleich geschrieben und wird angezeigt!)

          Der Schuss geht aber nach hinten los, sobald die Zeilen umgebrochen werden, so wie hier im Posting-Text. Dann wird's unübersichtlich.

          Jop. Nächstes Mal mach ich es besser....

          Viele Grüße
          Fabienne

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Frage zum Style

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    ich habe folgendes Problem: in dem "CONTAINER"

    ... der wie schon gesagt wurde nicht "CONTAINER" heißt, sondern "container" ...

    wird das Hintergrund-Bild nur im IE, nicht aber im Safari angzeigt.

    Wie hoch ist das Element?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zum Style

      Fabienne
      – Informationen zu den Bewertungsregeln

      Hi Cheatah!

      Wie hoch ist das Element?

      Der CONTAINER umfasst den kompletten Content. Ist zwar keine Höhe definiert, aber ca. 500px Content befindet sich drin.

      Hier mal der ganze Code dazu:
      Vielleicht gibts ja noch andere Dinge, die falsch sind....

        
  
<!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">  
<head>  
<title></title>  
<meta name="keywords" content=" ">  
<meta name="description" content=" ">  
  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  
<link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
  
<body>  
	<div id="center">  
		<div id="CONTAINER">  
		  
		 	<div id="DIV_LOGO"><a href="/"><img src="bilder/pix.gif" alt="zur&uuml;ck zur Startseite" name="logo" width="440" height="50" border="0" /></a></div>  
			<div id="DIV_NAV1">  
				<div id="NAV1">  
					<ul>  
						<li><a href="?kat=20"  class="horizontal_menu_inactive_1">Startseite</a></li>  
						<li><a href="?kat=23"  class="horizontal_menu_active_1">Zur&nbsp;Person</a></li>  
					</ul>						  
				</div>						  
			</div>  
			<div id="DIV_IMAGE"><img src="bilder/layout/banner_1.jpg" width="940" height="360" /></div>  
			<div id="DIV_CONTENT">  
			  
      			<div id="DIV_470">			  
      			      	<div id="DIV_NAV2">  
      					<div id="NAV2">  
      						<ul>  
      				      			<li><a href="?kat=51"  class="horizontal_menu_inactive_2">Vita</a></li>  
      							<li><a href="?kat=52"  class="horizontal_menu_inactive_2">Privat</a></li>  
          						</ul>						  
      		    			</div>	  
      			        </div>	  
             			</div>  
  
      			  
      			<div id="DIV_470">  
      				<div id="DIV_TEXT">  
                    <h1>Headline</h1>  
                    <p>Lorem ipsum dpretium et Nam massa id at vitae.  
                    Vel dui elit Nulla magna quis Quisque augue pede pretium Suspendisse.  
                    Eget lacinia Integer nibh vestibulum pharetra libero Morbi vitae tempor.</p>  
        			</div>  
      			</div>  
			  
      			<div id="DIV_FOOTER">HIER der Footer</div>  
      			<div id="BOX_end"></div>  
	  		  
 		 </div>  
	</div>  
</div>  
</body>  
</html>  
  
  
  


        
  
@charset "iso-8859-1";  
/* STANDARD */  
  
  
html             	  { height: 100%; min-height: 100%;}  
body 		     	  {	height: 101%; margin: 0; background:url(bilder/layout/bg_center.jpg) repeat-x; color: #666666;  
                  FONT-SIZE: 12px; line-height: 17px; FONT-FAMILY: "Times New Roman", Times, serif, Arial; }  
						  
#center 		      {	text-align: center; width: 99%; padding: 0px 0px 0px 0px; }  
#CONTAINER 	      { text-align: left; margin: 0 auto; width: 960px; padding: 0px 10px 0px 10px; background:url(bilder/layout/bg_container.gif) no-repeat top center;  
						margin-top: 0px; margin-bottom: 0px; }  
#BOX_end			  { clear: both; }	  
  
#DIV_LOGO         	  { width: 960px; float: left; padding: 35px 0px 35px 0px; text-align: center; } /* left, center, right*/  
#DIV_NAV1         	  { width: 960px; float: left; padding: 0px 0px 0px 0px; }  
#DIV_NAV2         	  { width: 210px; float: left; padding: 0px 0px 0px 0px; margin: 0px 30px 0px 10px; }  
#DIV_NAV3         	  { width: 200px; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }  
  
#DIV_IMAGE       	  { width: 940px; float:left; padding: 10px 10px 30px 10px; background:url(bilder/layout/bg_image.jpg) bottom no-repeat;}  
#DIV_CONTENT       	  { width: 940px; float:left; padding: 10px 10px 30px 10px; text-align:left;}  
#DIV_470        	  { width: 470px; float:left; padding: 0px 0px 0px 0px;}  
#DIV_TEXT        	  { width: 450px; float:left; padding: 0px 20px 0px 0px; text-align: justify; FONT-FAMILY: Arial, "Times New Roman", Times, serif ;}  
  
#DIV_FOOTER        	  { width: 920px; float:left; padding: 10px 20px 10px 20px; margin-top: 20px; margin-bottom: 50px;  
						border-top: 1px dotted #999999; color: #999999; FONT-FAMILY: Arial, "Times New Roman", Times, serif; }  
#DIV_FOOTER a:link    { font-weight: bold; color: #3D88C2; text-decoration: none; }  
#DIV_FOOTER a:visited { font-weight: bold; color: #3D88C2; text-decoration: none; }  
#DIV_FOOTER a:hover   { font-weight: bold; color: #3D88C2; text-decoration: none; }  
#DIV_FOOTER a:active  { font-weight: bold; color: #3D88C2; text-decoration: none; }  
  
  
/*---------------------------------------------------------------------------------------------------------------------------*/  
  
#DIV_TEXT ul 		  { margin: 0px 0px 0px 15px; padding: 0px 0px 0px 10px;}  
#DIV_TEXT li 		  { margin: 0px 0px 0px 0px;  padding: 8px 0px 3px 0px; list-style-type: square; }						  
  
/*---- LINKS ----------------------------------------------------------------------------------------------------------------*/  
  
a:link   	          { font-weight: normal; color: #3D88C2; text-decoration: none; }  
a:visited 	          { font-weight: normal; color: #3D88C2; text-decoration: none; }  
a:hover   	          { font-weight: normal; color: #666666; text-decoration: none; }  
a:active    	      { font-weight: normal; color: #666666; text-decoration: none; }  
  
h1  	 			  { color: #007BA8; font-size: 24px; font-weight: normal; margin: 0px 0px 20px 0px; line-height: 28px;text-align: left; FONT-FAMILY: "Times New Roman", Times, serif, Arial;}  
  
/*---- NAV 11111111 ------------------------------------------*/  
  
  
#NAV1 				{ line-height: 40px; }  
  
#NAV1 ul 			{ width: 960px; font-size: 16px; font-weight: normal; text-align: center;  
					  list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } /* text-transform: uppercase; */  
					  
#NAV1 li 			{ display: inline; } /* clear: left;  ODER  display: inline; *//* UL-WIDTH entscheidet */  
#NAV1 li a 			{ float: left; padding: 0px 19px 0px 18px;  
					  background:url(bilder/layout/nav1_trenn.gif) no-repeat right; color: #FFFFFF; text-decoration: none; }  
#NAV1 li a:hover 	{ background:url(bilder/layout/nav1_a.jpg) no-repeat right; color: #007BA8; text-decoration: none; }  
#NAV1 li a.horizontal_menu_semiactive_1 		{ background:url(bilder/layout/nav1_a.jpg) no-repeat right; color: #007BA8; text-decoration: none; }	  
#NAV1 li a.horizontal_menu_semiactive_1:hover { background:url(bilder/layout/nav1_a.jpg) no-repeat right; color: #007BA8; text-decoration: none; }  
#NAV1 li a.horizontal_menu_active_1 		{ background:url(bilder/layout/nav1_a.jpg) no-repeat right; color: #007BA8; text-decoration: none; }	  
#NAV1 li a.horizontal_menu_active_1:hover { background:url(bilder/layout/nav1_a.jpg) no-repeat right; color: #007BA8; text-decoration: none; }  
  
/*---- NAV 22222222 ------------------------------------------*/  
  
  
#NAV2 				{ float: left; background: white; line-height: 16px; margin-bottom: 10px;}  
  
#NAV2 ul 			{ width: 210px; font-size: 15px; font-weight: bold;  
					  background: white; list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }  
					  /* text-transform: uppercase; */  
					  
#NAV2 li 			{ clear: left; } /* clear: left;  ODER  display: inline; *//* UL-WIDTH entscheidet */  
#NAV2 li a 			{ float: left; padding: 7px 0px 7px 10px; width: 200px; border-bottom: 1px solid #EEEEEE;  
					  background:url(bilder/layout/bg_nav2_p.jpg); color: #666666; text-decoration: none; }  
#NAV2 li a:hover 	{ background:url(bilder/layout/bg_nav2_a.jpg); color: #007BA8; text-decoration: none; padding: 7px 0px 7px 25px; width: 185px; }  
#NAV2 li a.horizontal_menu_semiactive_2 		{ background:url(bilder/layout/bg_nav2_a.jpg); color: #007BA8; text-decoration: none; padding: 7px 0px 7px 25px; width: 185px; }	  
#NAV2 li a.horizontal_menu_semiactive_2:hover { background:url(bilder/layout/bg_nav2_a.jpg); color: #007BA8; text-decoration: none; padding: 7px 0px 7px 25px; width: 185px; }  
#NAV2 li a.horizontal_menu_active_2 		{ background:url(bilder/layout/bg_nav2_a.jpg); color: #007BA8; text-decoration: none; padding: 7px 0px 7px 25px; width: 185px; }	  
#NAV2 li a.horizontal_menu_active_2:hover { background:url(bilder/layout/bg_nav2_a.jpg); color: #007BA8; text-decoration: none; padding: 7px 0px 7px 25px; width: 185px; }  
  
  
/*---- NAV 33333333333 ------------------------------------------*/  
  
  
#NAV3 				{ float: left; line-height: 12px; margin-bottom: 10px;}  
  
#NAV3 ul 			{ width: 190px; font-size: 13px; font-weight: bold;  
					   list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }  
					  /* text-transform: uppercase; */  
					  
#NAV3 li 			{ clear: left; } /* clear: left;  ODER  display: inline; *//* UL-WIDTH entscheidet */  
#NAV3 li a 			{ float: left; padding: 4px 0px 4px 15px; width: 175px;  
					  background:url(bilder/layout/bg_nav3_p.jpg) left center no-repeat; color: #666666; text-decoration: none; }  
#NAV3 li a:hover 	{ background:url(bilder/layout/bg_nav3_a.jpg) left center no-repeat; color: #007BA8; text-decoration: none; }  
#NAV3 li a.horizontal_menu_semiactive_3 		{ background:url(bilder/layout/bg_nav3_a.jpg) left center no-repeat; color: #007BA8; text-decoration: none; }	  
#NAV3 li a.horizontal_menu_semiactive_3:hover { background:url(bilder/layout/bg_nav3_a.jpg) left center no-repeat; color: #007BA8; text-decoration: none; }  
#NAV3 li a.horizontal_menu_active_3 		{ background:url(bilder/layout/bg_nav3_a.jpg) left center no-repeat; color: #007BA8; text-decoration: none; }	  
#NAV3 li a.horizontal_menu_active_3:hover { background:url(bilder/layout/bg_nav3_a.jpg) left center no-repeat; color: #007BA8; text-decoration: none; }  
  
/*------------------------------------------------------------*/

      Besten Dank für Eure Unterstützung!
      Fabienne

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zum Style

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Fabienne:

        nuqneH

        »» Wie hoch ist das Element?
        Der CONTAINER umfasst den kompletten Content. Ist zwar keine Höhe definiert, aber ca. 500px Content befindet sich drin.

        Nein, tut es nicht. Gefloatete Elemente sind nicht im normalen Elementfluss und haben keinen Einfluss auf die Höhe ihres Elternelements.

        Den "CONTAINER" evtl. auch floaten lassen?

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Frage zum Style

          Fabienne
          – Informationen zu den Bewertungsregeln

          Hallo Qapla'

          habe float:left ausprobiert.
          Es funktioniert.
          Habe float:none ausprobiert => Bild wird nicht mehr angezeigt.
          ???

          Aber im IE wird es beides Mal angezeigt.

          Beste Grüße
          Fabienne

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Frage zum Style

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Fabienne:

            nuqneH

            Habe float:none ausprobiert => Bild wird nicht mehr angezeigt.

            "none" ist der Defaultwert der 'float'-Eigenschaft. [CSS2 §9.5.1]

            'float: none' wirkt also hier genauso wie keine Angabe.

            Aber im IE wird es beides Mal angezeigt.

            IE macht so einige Dinge, die er nicht soll.

            Qapla'

            --
            Bildung lässt sich nicht downloaden. (Günther Jauch)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln