Good CSS Reference?

[Banana]

I'm starting to realize how terribly bare-bones W3C's documentation is on WRT CSS properties. The issue I'm running into is not knowing which properties actually applies to what element, and when it may be ignored/overridden by other markups. I should clarify that as I understand it, it's part of how CSS is supposed to work, but I'm referring more to where other properties that may be unrelated to CSS may make such properties invalid. In my specific case, I realized that I have no control over borders for a given table cell if the table has cellspacing set to more than zero. Maybe that wasn't an accurate description, and if wasn't, I'd sure love to find out...

Too bad there's not a browser that'll happily commit hari-kari when it runs into a conflicting CSS properties. That'd make my life so much easier. Web inspector sure helps a lot in pointing out where a certain bungling doofus has forgotten his closing tag but CSS - meh, forget it.

So is there such place that list this kind of information?

[Brad]

The W3C spec describes default properties for HTML elements here: Appendix D. Default style sheet for HTML 4 (http://www.w3.org/TR/CSS21/sample.html).

For the process of cascading and overriding, there's this section: 6 Assigning property values, Cascading, and Inheritance (http://www.w3.org/TR/CSS21/cascade.html)

What pages are you reading for your info?

Maybe I don't have a clear picture of what you're asking…

[Banana]

I've been using pages like those (http://www.w3schools.com/css/css_border.asp), which I typically find via Google using "css property <name of property".

In my specific case, it's not the inheritance per se that was tripping me up but rather that I was specifying invalid properties unknowningly. I've already cited the example of how table's cellspacing can seem to override any styling I give to the table cells' border. Another example is trying to pass a "vertical-align:top" to a non-table-element - this required me to add a "style:table-cell" and as well nest it inside another element with "style:table" (or use a real HTML table although). That wasn't explicitly documented on those pages, though the example uses img, which I've found in later google seems to be an exception to the rule (?) but that won't work on say, div or span tags (http://www.w3schools.com/Css/pr_pos_vertical-align.asp).

Your second link already discusses CSS inheritance/handling conflicts between two CSS stylesheets, but my scenario is more like "this property does not apply for this element in a given context" and I'm trying to find if there's something that can at least start to enumerate where this becomes true.

I suppose in short, I'd like to see a "applies to:" list for those various properties, I think.

Did that clarify?

[Brad]

w3schools.com only provides barebones teaching tools. It's a decent place to get started and find quick references, but that's it, and AFAICT, it's not actually affiliated with the W3C. For the actual specs, always hit up w3.org (http://www.w3.org/). The full standards specifications live there, in all their verbose glory. The two links I posted above are just small sections of the full CSS spec, here:

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (http://www.w3.org/TR/CSS2/)

Related:
HTML5 (Working Draft) (http://www.w3.org/TR/html5/)
HTML 4.01 Specification (http://www.w3.org/TR/html401/)
Introduction to CSS3 (Working Draft) (http://www.w3.org/TR/css3-roadmap/)

[Brad]

Another example is trying to pass a "vertical-align:top" to a non-table-element - this required me to add a "style:table-cell" and as well nest it inside another element with "style:table" (or use a real HTML table although).
There are lots of misconception about how CSS defines vertical-align, and admittedly it has been seen as one of the major weaknesses in CSS for going on a decade. There are all sorts of box nesting tricks that people have come up with to get and end result that looks like a table cell's vertical alignment. That said, the non-table behavior is described in the spec, but it's described in the language of the spec and requires and understanding of how the box model works with block and inline content.

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Note. Values of this property have different meanings in the context of tables. Please consult the section on table height algorithms for details.

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
Much of the specification is like this and assumes you are familiar with the vocabulary defined earlier in the spec.

That wasn't explicitly documented on those pages, though the example uses img, which I've found in later google seems to be an exception to the rule (?) but that won't work on say, div or span tags
In this case, you have to understand the default display values for HTML elements as well as the box height calculations to "get" why this happens. vertical-align, as quoted above, only applies to inline elements. So, you actually can apply it to spans. Try this example. Using colored borders like this as you experiment can help show you where the box boundaries are being calculated.

<style type="text/css">
div {
border: 1px solid gray;
}
.outer {
border: 1px solid green;
}
.inner {
vertical-align: -100%;
border: 1px solid red;
}
</style>

<span class="outer">Lorem <span class="inner">ipsum</span> amit</span>
<br>
<br>
<div>dolor <img class="inner" src="http://forums.applenova.com/images/buttons/ip.png"> sit</div>
<br>
<br>
<div><span class="outer">Lorem <span class="inner">ipsum</span> amit</span></div>


http://i.imgur.com/aRhM8.png

[Brad]

On that specific subject, here's a human-readable explanation of this attribute that doesn't require as intimate knowledge of the rest of the spec:

http://phrogz.net/css/vertical-align/index.html

[Banana]

That's a start. I don't mind learning the new vocabulary & "spec-speak" if that's what required to grok the rules behind CSS. It's too bad there's no handy "applies to" listing but at least it's documented. As you surmised, I'm start to realizing there's a difference between a block element and inline element and will probably be consulting the W3's specs more often as I go by.

Thanks for your help & patience & sample to play with, Brad.

[Banana]

BTW, I actually read that article earlier in PM, which actually was what prompted me to start this thread so I could easily research next time I bump into a gotcha.

[Banana]

Here's another stumbling block for me.

I built a pair of horizontal lists and floated them left & right inside a div. Looks good, but I noted that the first item of both list are still indented. Looking up the default properties, I figured that I just had to tweak my CSS to set margin & padding to 0px. That didn't work. After trying to override any other default properties & googling aimlessly, I found a workaround -- if I apply a style attribute directly to the ol element with "padding:0", it works! It'd be easy if it was just me bungling up the names that it didn't match up in the CSS but ol does seem to correctly pick up all other attributes I gave to make it render as a horizontal list, so I'm not sure what is the issue exactly? Can someone point out where I went wrong?

Code (without the style attribute added):
<div class="menubar clearfix">
<ol class="navlist lft">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol class="navlist rgt">
<li>d</li>
<li>e</li>
<li>f</li>
</ol>
</div>

.menubar{
background: #DDDDDD;
color: #000000;
font-size: 9pt;
}
.navlist ol {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: transparent;
}

.navlist li {
display: inline;
list-style-type: none;
padding-left: 10px;
padding-right: 10px;
background-color: transparent;
}

.lft {
float: left;
}

.rgt {
float: right;
}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

The only change that "worked" was:
<ol class="navlist lft" style="padding:0px;">