CSS Inheritance

we can assign multiple class names to a single element? That means we can change the style sheet so it looks like this:

.boxOut {
  width: 12em;
  padding: 0.5em;
  margin: 0.5em;
  border: solid 1px black;
}

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

And then the HTML will look like:

<div class="boxOut oddBoxOut">

Grouping Selectors

A single style may have multiple selectors assigned to it through the use of grouping.

To revisit the previous example, we first simplify the HTML so we only mention the one class:

<div class="oddBoxOut">

Then we assign the CSS we want to it, but we group the common property/value pairs.

.oddBoxOut,
.evenBoxOut {
  width: 12em;
  padding: 0.5em;
  margin: 0.5em;
  border: solid 1px black;
}

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

These two techniques should solve most problems which people think can be solved with OO-style inheritance

CSS Stylizer

Been playing with this http://www.skybound.ca/stylizer/ CSS editor lately, and it has some really nice features:

It has a drop down to indicate only certain style elements appear in certain browser flavours:

That’s pretty cool. I just use a bookmark for that at the moment (http://www.noupe.com/better-design/7-css-hacks-you-cannt-live-without.html) but IDE integration would rock.

Ajax Calendar doesn’t render properly

If your Calendar Extender doesn’t render properly, normally because its’ style has been overriden by the css. As Calendar heavily use DIV, TABLE. To recover this just wrap your textbox and calendar in <DIV class=”calendarContainer “>

and put the following lines in your css:

.calendarContainer table

{
width:0px;

height:0px;
}

.calendarContainer table tr td

{
padding:0;
margin:0;
}

And check your css file doesn’t include

div
{
    min-height: 0;
}

it will set haslayout = true, and you have no way to set to false later.

Look http://www.satzansatz.de/cssd/onhavinglayout.html for more details