✔ Vererbung funktioniert auch mit !important; nicht

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich steh grad wie der Ochs vorm Berg.
ich habe ein Div mit verschachtelten address-Element und Spans. Nun möchte ich das alles als Inlineelemente dargestellt wird. Nur irgendwie wird das
CSS: 
display: inline;
nicht an das address-Element vererbt.

HTML: 
<div id="footer2">
   <div class="contact-address">
      <span class="jicons-none"> </span>
      <address>
         <span class="contact-street"> XXX </span>
         <span class="contact-suburb"> XXX </span>
         <span class="contact-postcode"> XXX </span>
      </address>
   </div>
</div>
CSS: 
#footer2 div
{
	display: inline !important;
}

Im Chrome wird mir angezeigt dass das User-Agent-Stylesheet
CSS: 
display: block;
anwendet. Aber das !important; müsste doch auf jedenfall auch gerade das User-Agent-Stylesheet überschreiben.

Viellicht kann mir jemand erklären woran das liegt?

Viele Grüße
 
Zuletzt bearbeitet:
Wieso sollte das address denn reagieren? Dein Selektor beinhaltet doch nur DIV Elemente und der default display Wert von address ist nicht "inherit". Daran ändert auch !important nichts. Das address fühlt sich nicht angesprochen.
 
Hallo,
also funktioniert die Vererbung nur wenn der Defaultwert für ein Element inherit ist?
Heißt ich setze address auf display:inherit; dann müsste es den Display-Wert von #footer2 übernehmen.
Richtig?

Viele Grüße
 
Hallo,

manche Eigenschaften werden vererbt, die Display-Eigenschaft gehört nicht dazu ("display:none" ist eine Ausnahme). In einer CSS-Referenz (z.B. CSS4YOU) kann man nachsehen, ob und welche Eigenschaft regulär vererbt wird und mit "inherit" kann man sie erzwingen.

Übrigens ist m.E. das address-Element ein Blockelement, das in deinem Markup von einem span umhüllt wird. Ich glaube das ist invalid.

P.S. Gerade gesehen: Span umhüllt natürlich nicht. Nächstes mal sehe ich besser hin!
 
Zuletzt bearbeitet:
Weil es sich neben footer eins in der selben Zeile ohne Zeilenumbruch ausrichten soll und dessen Inhalt ebenso, deshalb die Vererbung.

Viele Grüße
 
Würde da nicht dieplay:inline-block, oder float:left besser funktionieren?
Code: 
<!DOCTYPE html>
<title>address</title>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />

<style type="text/css">
* {
 margin:0;
 padding:0;
}


#footer2 {
 background:#aaa;
 display:inline-block;
 padding:10px;
}

address {
 background:#dad;
 padding:10px;

}

span {
 background:#dee;
}
</style>
</head>
<body>

<div id="footer2">
   <div class="contact-address">
      <span class="jicons-none"> </span>
      <address>
         <span class="contact-street"> XXX </span>
         <span class="contact-suburb"> XXX </span>
         <span class="contact-postcode"> XXX </span>
      </address>
   </div>
</div>
</body>
</html>

Die Hintergrundfarben und Innenabstände dienen nur zur Verdeutlichung.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück