✔ CSS Verhalten ändert sich bei Leerzeichen zwischen Selektor und ID

[kle-ben]

Hallo zusammen,

ich hab da einen seltsames Verhalten das ich mir nicht erklären kann. Ich will ein DIV-Tag im Zentrum der Webseite darstellen. Dazu hab ich folgendes CSS definiert:

div#SITE {
left:50%;
width:800px;
display:block;
position: absolute;
margin-left:-400px;
}

Das DIV mit der ID "SITE" wird auch wie gewünscht in der Mitte angezeigt. Anschließend hab ich den CSS-Code in SASS umgeschrieben und ihn compiliert. Das Ergebnis sieht gleich aus bis auf eine Kleinigkeit. Zwischen div und #SITE ist ein Leerzeichen. Dies hat zur folge das das DIV-Tag nicht mehr zentriert dargestellt wird sondern linksbündig. Die Eigenschaft left wird anscheinend nicht mehr beachtet. Alle Anderen Eigenschaften jedoch schon. Wenn ich eine Hintergrundfarbe setze wird diese angepasst. Alle CSS Definitionen beschreiben den ID-Selector ohne Leerzeichen. Der Browser (Firefox,Safari) nimmt ansonsten jedoch alle ID-Selektoren mit Leerzeichen an und verarbeitet sie richtig. Erstellt der SASS Compiler nun ein falsches CSS oder woran liegt das? Wenn ich um das DIV mit der ID "SITE" ein weiteres DIV setze verschwindet der Fehler und die Seite wird wieder Zentriert dargestellt (mit Leerzeichen im Selektor). Ist dafür eventuell eine default-Eigenschaft des DIV-Tags verantwortlich?

Hat jemand eine Erklärung für das merkwürdige Verhalten?

Viele Grüße,
kle-ben



[]

 

[Maik]

Hi,

was sollen wir dir jetzt raten, wenn es offensichtlich ist, dass das Leerzeichen im Selektor zwischen div und #SITE dafür verantwortlich ist, dass die Regelmenge vom Browser nicht korrekt interpretiert wird?

Die Selektoren "div#SITE {}" und "div #SITE {}" definieren nunmal zwei unterschiedliche Mustervergleiche.

Wenn du SASS davon nicht überzeugen kannst, das Setzen eines Leerzeichens zu unterlassen, verzichte auf die Angabe des Elementnamens.

Wenn ich um das DIV mit der ID "SITE" ein weiteres DIV setze verschwindet der Fehler und die Seite wird wieder Zentriert dargestellt

Dann tritt auch der Selektor für Nachfahren in Kraft, und schließt hier den Kreis, warum der Selektor mit Leerzeichen zwischen Elementname und ID-Bezeichner ohne dieses umschliessende DIV im Markup vom Browser nicht interpretiert wird.

mfg Maik

 

[kle-ben]

Hm,

Das Problem hat sich nun auch bei weiteren Elementen ergeben. Es ist demnach also ein Problem des SASS Compilers der mir diese Leerzeichen da rein macht. Finde ich sehr seltsam das er ein ungültiges CSS erzeugt. Das Problem muss doch schon X Leuten aufgefallen sein. Aber ich hab noch keinen vergleichbaren Thread im Internet gefunden. Vielleicht muss ich mein SASS Code dafür anders definieren (SASS ist neu für mich). Der Vorteil von SASS soll ja unteranderem sein das man nicht alles doppelt schreiben muss. Muss ich den folgenden Zusammenhang evtl. anderst beschreiben:

div
	#SITE
		left: 50%
		width= !MAIN_WIDTH
		display: block
		position: absolute
		margin-left= -(!MAIN_WIDTH/2)

Ich könnte div#SITE direkt schreiben aber dann müsste ich das vor jedem Element. Geht das auch noch anders, ohne das weg zu machen?

Danke und viele Grüße,
kle-ben

 

[Maik]

Wenn du SASS davon nicht überzeugen kannst, das Setzen eines Leerzeichens zu unterlassen, verzichte auf die Angabe des Elementnamens.

Also, wie wäre es hiermit?

#SITE {
        left: 50%
        width= !MAIN_WIDTH
        display: block
        position: absolute
        margin-left= -(!MAIN_WIDTH/2)
}

Da kann SASS dann soviele Leerzeichen einfügen, wie er Lust und Laune hat :suspekt:

mfg Maik

 

[Maik]

http://sass-lang.com/try.html rendert mir alles ohne diese Leerzeichen und Zeilenumbrüche in den einzelnen ID-Selektoren.

// Scoped Styles

div#contents
  width = !page_width
  div#sidebar
    float: right
    width = !sidebar_width
  div#main
    width = !page_width - !sidebar_width
    background = !primary_color
    h2
      color: blue
div#footer
  height: 200px

div#contents {
  width: 800px; }
  div#contents div#sidebar {
    float: right;
    width: 200px; }
  div#contents div#main {
    width: 600px;
    background: #eeeeee; }
    div#contents div#main h2 {
      color: blue; }

div#footer {
  height: 200px; }

mfg Maik

 

[kle-ben]

Hm Okay dann muss ich das wohl immer davor schreiben.
Vielen Dank für dein Hilfe!

Gruß,
kle-ben

 

[Maik]

Hm Okay dann muss ich das wohl immer davor schreiben.

Hast du etwa nicht?

mfg Maik

 

[Matthias Reitinger]

Das Problem hat sich nun auch bei weiteren Elementen ergeben. Es ist demnach also ein Problem des SASS Compilers der mir diese Leerzeichen da rein macht.

Oder ein Problem des Benutzers ;-]

Finde ich sehr seltsam das er ein ungültiges CSS erzeugt.

Das erzeugte CSS ist nicht ungültig. Es besitzt nur eine andere Bedeutung, als du beabsichtigt hattest. Verschachtelte Regeln stehen für die Selektion eines Nachfolgers. Kein Leerzeichen zu setzen wäre hier also falsch.

Grüße,
Matthias