Stehe aufm CSS-Schlauch ...

Narodnaja · #1 20-09-2006, 23:49

Vielleicht kann mir mal jemand meinen Denkfehler erklären.

Zwei divs, 810px breit, direkt untereinander. Eines normal mit Inhalt, das zweite mit Hintergrundbild.

Folgender Code: (mal mit Tags)

PHP-Code:


			
<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html;">

<style type="text/css">

.oben {

overflow:hidden;

width:810px;height:225px;

padding:0px;

border: 1px solid green;

vertical-align:bottom;

}



.inhalt {

background-image: url(./testbild.jpg);

background-repeat: no-repeat;

background-attachment:fixed;

background-position: center;

overflow:auto;

width:810px;height:350px;

border: 1px solid green;

}

</style>

</head>



<body bgcolor="#000000">



<div class="oben">

</div>



<div class="inhalt">

</div>



</center>

</body>

</html>

Eigentlich sollte doch die background-position: center; in der inhalt-class das Hintergrundbild zentriert bezüglich des entsprechenden HTML-Elementes ausrichten, also des definierten divs. Soweit dachte ich eigentlich kenne ich CSS ...

Der IE (gerade der !!!) macht das auch. Opera und Firefox dagegen richten das Bild zentriert auf die Seite aus. Was natürlich zur Folge hat, dass das Bild absolut nicht da ist, wo es sein soll. Nur: Warum ???

Wenn mir irgendjemand nen Stein an die Birne werfen kann, bin ich dankbar.

***Sven*** · #2 21-09-2006, 02:24

Ich würd als erstes einen gültigen DocType etc. definieren um zu verhindern, daß der IE sich in den Quirksmodus versetzt und dann so einige Konstrukte umsetzt die nach HTML gar nicht gehen dürften.

Dann hast du noch unterschiedliche Notationen in den CSS Angaben (mal mit, mal ohne Leerzeichen) und die <div>s haben unnötigen Inhalt (Zeilenumbruch und etwaige Leerzeichen).
Zu guter Letzt steht da ein </center> ohne das ein <center> davor wäre - vermutlich der eigentliche Grund für eigenartiges Browserverhalten.
Versuch doch mal das Ganze komplett ohne depricated HTML-Tags (also auch kein bgcolor= - das macht man in css mit body {...}) und dann durch den W3C Validator gejagt.
Erst wenn der keine Fehler mehr meldet solltest du dich darüber wundern, daß verschiedene Browser deine Seiten unterschiedlich darstellen.

Narodnaja · #3 21-09-2006, 21:20

Zitat:

Zitat von Narodnaja

Werde das mal durchtesten.
Eh - der center-Tag und einiges anderes sind noch fälschlicherweise übrig geblieben, wie ich unnötigen Inhalt gelöscht habe, der wird natürlich auch eröffnet

Validator wäre eine Idee

war zu spät gestern.
Ich meld mich heute Abend nochmal. Verdammter Quirks-Mode.

Ich habs mir nochmal angeschaut. Es war natürlich alles andere als valide, aber dummerweise hilft das auch nix ...
Hier mal verlinkt, diesmal CSS2 und HTML4.01 strict valide.
Der Quellcode ist hier (neuer Versuch mit Hilfe des bekannten Dead-Center-Beispiels), diesmal komplett:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css" media="screen"><!--

body 

    {

    color: white;

    background-color: #003;

    margin: 0px

    }



#mittellinie        

    {

    color: white;

    background-color: #0ff;

    text-align: center;

    position: absolute;

    top: 50%;

    left: 0px;

    width: 100%;

    height: 1px;

    overflow: visible;

    visibility: visible;

    display: block

    }



#rahmen    

    {

    font-family: Verdana, Geneva, Arial, sans-serif;

    background-color: #f00;

    color : white;

    margin-left: -401px;

    position: absolute;

    top: -288px;

    left: 50%;

    width: 802px;

    height: 576px;

    visibility: visible;

    text-align: left

    }

    

#oben {

    overflow:hidden;

    width:800px;height:222px;

    padding:0px;

    border: 1px solid green;

    vertical-align:bottom;

    text-align: center

}



#inhalt {

    background-image:  url(./testbild.gif);

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

    overflow:auto;

    width:800px;height:350px;

    border: 1px solid green

}



</style>



</head>

<body>

<div id="mittellinie">

            <div id="rahmen">

                <div id="oben">

                </div>

                

                <div id="inhalt">

                </div>

            </div>

</div>

<p>

 <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://faenger.de/csstest.html">

  <img style="border:0;width:88px;height:31px"

       src="http://jigsaw.w3.org/css-validator/images/vcss" 

       alt="Valid CSS!" >

 </a>

</p> 

<p>

    <a href="http://validator.w3.org/check?uri=referer"><img

        src="http://www.w3.org/Icons/valid-html401"

        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>

  </p>

<p>

  <a href="http://www.validome.org/referer">

    <img style="border:none"

         src="http://www.validome.org/images/set2/valid_html_4_0_1.gif"

         alt="Valid HTML 4.01" width="88" height="31">

  </a>

</p>

 </body>

</html>

Schau dir das mal im IE, Firefox und Opera (den ich benutze) an. Ich kapier nicht, warum die Zentrierung des verdammten Hintergrundbildes bei Opera 9.01 und Firefox 1.5.0.7 auf die Gesamtseite erfolgt, und nicht bezüglich des divs, in dem es steckt

Hat jemand (Sven ?) eine Idee ?

***Sven*** · #4 21-09-2006, 21:39

Mhmmm, ich schau mir das mal heute abend in Ruhe vom Hotelzimmer aus an.... (jetzt sag nicht es sei schon Abend, hier ist es erst 15:40

)

Narodnaja · #5 21-09-2006, 21:40

Fein

merci !
Und: schönen Aufenthalt noch *g*

***Sven*** · #6 22-09-2006, 02:37

Keine Ahnung warum, aber wenn du ein paar Angaben für den Container mit dem Hintergrundbild weglässt funktioniert es einwandfrei:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Test</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<style type="text/css" media="screen"><!-- 
body 
    { 
    color: white; 
    background-color: #003; 
    margin: 0px 
    } 

#mittellinie         
    { 
    color: white; 
    background-color: #0ff; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 0px; 
    width: 100%; 
    height: 1px; 
    overflow: visible; 
    visibility: visible; 
    display: block 
    } 

#rahmen     
    { 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    background-color: #f00; 
    color : white; 
    margin-left: -401px; 
    position: absolute; 
    top: -288px; 
    left: 50%; 
    width: 802px; 
    height: 576px; 
    visibility: visible; 
    text-align: left 
    } 
     
#oben { 
    overflow:hidden; 
    width:800px;height:222px; 
    padding:0px; 
    border: 1px solid green; 
    vertical-align:bottom; 
    text-align: center 
} 

#inhalt { 
    background-image:  url(testbild.gif); 
    /* background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; */
    overflow:auto; 
    width:800px;height:350px; 
    border: 1px solid green 
} 

</style> 

</head> 
<body> 
<div id="mittellinie"> 
            <div id="rahmen"> 
                <div id="oben"> 
                </div> 
                 
                <div id="inhalt"> 
                </div> 
            </div> 
</div> 
<p> 
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://faenger.de/csstest.html"> 
  <img style="border:0;width:88px;height:31px" 
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" > 
</a> 
</p> 
<p> 
    <a href="http://validator.w3.org/check?uri=referer"><img 
        src="http://www.w3.org/Icons/valid-html401" 
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a> 
  </p> 
<p> 
  <a href="http://www.validome.org/referer"> 
    <img style="border:none" 
         src="http://www.validome.org/images/set2/valid_html_4_0_1.gif" 
         alt="Valid HTML 4.01" width="88" height="31"> 
  </a> 
</p> 
</body> 
</html>

Die fragliche Stelle ist jetzt nur auskommentiert.

Da dein Hintergrundbild eh genau so groß ist wie der Container sind die Angaben auch recht überflüssig

Narodnaja · #7 22-09-2006, 08:29

*wunder*

Nagut, jetzt geht das immerhin erstmal, danke

Das fixieren des Hintergrundbildes bei langem Text geht aber dann wieder nicht.

Ohne die Angaben klappts beim Opera und FF, beim IE nur mit den Angaben. Grrr...

/edit:
So einfach kanns sein:

PHP-Code:


			
* html #inhalt {

    background-attachment: fixed;

    background-position: center;

}

und oben raus mit den beiden Anweisungen. Dann klappts auch mit der Nachbarin, und zwar valide. Fein fein.

Unvalide wirds erst wieder, wenn ich die IE-Scrollbalken behandeln muss ... hrmpf. Aber man kann halt nicht alles haben.

Danke nochmal @ Sven

*EEBKiller* · #8 22-09-2006, 13:40

Zitat:

Zitat von Narodnaja

Unvalide wirds erst wieder, wenn ich die IE-Scrollbalken behandeln muss ... hrmpf. Aber man kann halt nicht alles haben.

1. Scrollbalken macht der IE nur im Quirks Modus, im normalen Modus lässt er diese Angaben auch untern Tisch fallen

Ausser, du machst das hier als erstes in dein Dokument und benutzt als DOCTYPE einen XHTML 1.0 oder den XHTML 1.1:

PHP-Code:


			
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>

Alles ausser IE stört diese Zeile nicht, sie finden sie sogar OK. IE 6 und abwärts spackt dann aber rum und fällt in den Quirks Modus zurück. Wobei das natürlich nicht wirklich gerade die beste Lösung ist, aber sie funktioniert. Und wenn du eine Seite im Standardkonformen Modus geschrieben hast, wird sie im Quirks Modus zu 99% genauso angezeigt.

2. Man kanns trotzdem Valid gestalten:

PHP-Code:


			
<!--[if lt IE 7]>
<style type="text/css">
/* Stuff for IE only */
}
</style>
<![endif]-->

Jedes Programm inklusive Validator, Mozilla, Opera erkennt diesen Block (korrekterweise) als Kommentar. Nur IE (6 und abwärts) erkennt diesen Switch und interpretiert den Inhalt auch

Beachte, dass du solche CSS-"Hacks" nur in den <head> der jeweiligen Seiten klatschen kannst, das geht nicht irgendwo im Quelltext oder gar einem ausgelagerten CSS

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)