Since Firefox launched it's 4.0 Browser - changes to background colour in Blogger have been executed with-in the "span" tag. Before this the 'Text background color' widget in the Blogger Compose interface would change any "background-color;" - inside any tag. Now the widget only works with-in "span" tags --- and "span" tags are very limited as to what attributes they work with.
My goal today was to change the background colour of a box in Blogger with the existing "Text background color" widget - and I'm happy to announce, I've succeeded! :)
This coding will be incorporated into the Blogger Baseball Scorecard coding - so I can use colour notations in any browser when scoring games.
"Span" is 'different' than other tags. W3C calls "span", a "generic container", or more specifically, an "inline level generic container".(W3C | "Generic containers - the div and span elements" | http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements)
By playing around with it in Blogger tonight I have discovered that "span" will take attributes other than just "background-color" - it also allows other text related attributes - like "font-size", "line-height" and "margin".
Weird thing about "span" - each tag allows only one attribute (Inside Blogger), and then a closing tag after the content. To add more attributes to the same content one must add another "span" tag before the content, with a different attribute, and then a second closing tag at the end of the statement. One may not span other statements tagged with anything other than a span tag.
In this example the "background-color" is "white". I have coded four "span" tag elements in a row - holding colour, line-height, font-size and margin - followed by four blank spaces, and then four closing "span" tags.
The box is a "div" container around four "span" tags that render four 100px high, blank spaces - background coloured "white". With this coding I can change the colour of the area inside the box with the "Text background color" widget in Blogger's "Compose" interface. This is accomplished with three clicks: high-light the area inside the box (left-click and drag); click on the "Text background color" button; select a colour from the pallet. (See four coloured examples below.)
And though an accident I also discovered an obvious truth, one can colour each character in the same word a different colour. So in this coding the browser renders a specific, changeable colour in an empty box. In this example the font-size and the line-height are both set to 100px, and the text that I'm background colouring are blank spaces - so in this case with a box of this size, you can colour a box as many as four different colours!
There is no limit to the size that you can set the "font-size" and "line-height" to - so any sized box you like. By increasing the font-size and line-height (only bigger than the container size), one can make the 'swaths' of colour wider and narrower. By adjusting "margin" you can move them left and right.
Correction: Apparently I can add multiple attributes per "span" tag, and close "span" tags in-line --- as in the example above (highlight, view selection source).