Tahoe skin CSS validation errors with W3C CSS Validation Service

[Blama]

Hi Isomorphic,

while the W3C CSS Validation Service is not always up to date and therefore reports some bogus errors, it does find some syntax errors.
Please see these rules in v11.1p_2017-08-08:

.ribbonBar {
    background-color: #white; [B]//The #[/B]

.toolStripButtonOver, .toolStripButtonFocusedOver, .toolStripButtonSelectedFocused, .toolStripButtonSelectedFocusedOver, .toolStripButtonOpened,
    .toolStripButtonOverOpened, .toolStripButtonDownOpened, .toolStripButtonFocusedOpened, .toolStripButtonFocusedDownOpened,
    .toolStripButtonFocusedOverOpened, .toolStripButtonSelectedOpened, .toolStripButtonSelectedDownOpened, .toolStripButtonSelectedOverOpened {
    background-color: #transparent; [B]//The #[/B]


.navBarHeaderPaneTitle, .navBarHeaderPaneTitleDisabled, .detailPaneTitle, .detailPaneTitleDisabled, .listPaneTitle, .listPaneTitleDisabled {
    background-color: #f0f0f0;
    color: #616161;
    border: "1px solid #d1d3d4"; [B]//The ""[/B]

.sectionHeaderDisabledopened, .sectionHeaderDisabledclosed {
    background-color: #bce7e7; * [B]//The * (or is it some CSS hack?)[/B]
    zoom: 1;

Best regards
Blama

[Isomorphic]

The last one is indeed a CSS hack, but the first 3, while understood by all browsers, are typos - we'll fix them.

[Isomorphic]

These typos have been corrected. Please try the next nightly build, dated August 11.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I can see those are fixed.

Thanks,
Blama

[Blama]

Hi Isomorphic,

not really a CSS Error, but most likely a wrong class name.
Verifying this issue in my application I noticed that it was fixed in the showcase, but not in the application. Most likely this was, because the fix included some skin_styles.css changes.
After adjusting my own Tahoe-based skin_styles.css accordingly, this is fixed now for me here as well.

While doing so I had to scan changes in the css file and noticed that you have Right-To-Left classes where "RTL" is written "rtl". I assume this is wrong, as other RTL-classes use upper case:

/* sprited ComboBoxItem picker */
.comboBoxItemPicker,
.comboBoxItemPickerOver,
.comboBoxItemPickerFocused,
.comboBoxItemPickerFocusedOver,
.comboBoxItemPickerDisabledrtl,
.comboBoxItemPickerrtl,
.comboBoxItemPickerOverrtl,
.comboBoxItemPickerFocusedrtl,
.comboBoxItemPickerFocusedOverrtl {
  display: inline-block;
  background-position: 0px 0px;
  background: url(./images/pickers/down.png) no-repeat;
}

.comboBoxItemPickerOver,
.comboBoxItemPickerFocused,
.comboBoxItemPickerOverrtl,
.comboBoxItemPickerFocusedrtl {
  background: url(./images/pickers/down.png) no-repeat;
}

.comboBoxItemPickerFocusedOver,
.comboBoxItemPickerFocusedOverrtl {
  background: url(./images/pickers/down.png) no-repeat;
}

.comboBoxItemPickerDisabled,
.comboBoxItemPickerDisabledrtl {
  display: inline-block;
  background-position: 0px 0px;
  background: url(./images/pickers/down_Disabled.png) no-repeat;
}

If this is indeed wrong, this is minor to me, as I'm not using RTL.

Best regards
Blama

[Isomorphic]

We took a look here - the stylenames are correct. It's true that in some cases we use the suffix "RTL" and in others "rtl" but in each case the default styles appear to be correctly named, and the suffix correctly documented, so changing anything here does not seem like it would help anyone.