The problem is very simple:
<div id="main-content">
<ul>
<li>
<div class="post-row">
<div class="post-footer">
This is the Footer
<div class="footer-buttons">
<ul>
<li>Edit</li>
<li>Reply</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
And now main content:
#main-content ul {
margin:0;
padding:0;
}
#main-content ul li {
display:block;
list-style:none;
}
And last, footer-buttons:
.footer-buttons {
float:right;
}
.footer-buttons ul {
margin:0;
padding:0;
}
.footer-buttons ul li {
display: inline;
}
The problem is that the list in .footer-buttons
is displayed as block. And in fact when I checked DOM the display: inline
is overrided by the #main-content
.
From what I know understrand this shouldn't happen. Or am I wrong and id elements will always override child classes?