Joho the Blog » css

September 30, 2014

[d'oh] CSS alpha makes me happy

After all these years, I just found out about CSS alpha as a way of adjusting the opacity of the backgrounds of elements on a Web page.

In the past, I’ve used the opacity setting to do the job. So, if you have, say, a div that’s overlaying another element, setting its opacity to, say, 0.7 will make the entire thing 30% transparent. Opacity, in other words, is inherited by all of an element’s children without the children having any way of contesting the will.

But yesterday the opacity setting wasn’t working on an element for some reason. So I googled around and stumbled upon the alpha setting, which did what I wanted even better. Alpha sets the opacity of the background of the element while leaving the text and border opaque. This is great if you’re putting a label with text over other elements.

Here are two divs that are exactly the same in all their settings except one has its opacity set to 0.5 and the other has the alpha of its background color set to 0.5.

opacity

Notice that the alpha setting has left the text and border un-alpha’ed.

To set the alpha, you have to specify it as part of the rgb color setting, using the keyword rgba. For example, here’s the relevant portion of the CSS of the alpha-ed box in the screen capture above:

#e3{
border: 6px solid #FF8000;
background-color: rgba(255,111,207,0.5);
color: black;
}

And here’s a site that will convert your hex colors into rgb colors.

So, I’m hereby giving myself a giant D’oh slap n the hope that you won’t have to.

2 Comments »

January 2, 2012

Fixing the quirky noQuirks blog template

Thanks to Mirek Sopek, the folks at Mako Lab diagnosed why my new WordPress blog template was going all wonky in Internet Explorer 9. Even after I’d discovered that the problem was that I was declaring the HTML page with Quirks, I’d put the type declaration in the wrong spot. I put it at the top of header.php, thinking that would put it at the top of the HTML page that WordPress assembles out of various files. Nope. You have to put it at the top of the index.php file. D’oh!

We still don’t know why it worked on my copy of IE 9, at the same version level and both 64-bit.

Thank you Mirek and Mako Lab! I would never have figured this out without you.

2 Comments »

December 30, 2011

Quirky html

In the recent — and probably unabated — unpleasantness attending the launch of the update of this blog’s look, I have learned a little about Quirks mode. I learned this because Internet Explorer 9 was not displaying rounded corners or laying out divs (blocks of content) the way Firefox and Chrome were. Once I switched off Quirks mode in my blog pages, it worked much better.

There’s a good explanation and some very detailed info here. But as I “understand” the story, quirks mode was introduced to handle the problem that different browsers were expecting different sorts of markup (particular for CSS style information). Then, once the browsers realized it would be helpful to everyone if they agreed to support truly standardized standards, they had to decide what to do with the old code written in the particularities of each browser. So, they agreed to allow the HTML developer to specify whether the page she’s created should be interpreted according to the modern standardized standards, or if it’s quirky and ought to be interpreted according to the idiosyncratic expectations of the various browsers.

You, the HTML developer, specify your intentions in the DTD declaration at the very beginning of your HTML pages. This page will help you figure out exactly how that line should read.

Meanwhile, the shame and humiliation the launch of the new look of this blog has brought upon me only deepens, for I have given up on controlling the placement of divs by getting my floats in order. Screw it. I’ve plunked them into a table. Yeah, I’m CSS-ing like it’s 1995.

2 Comments »

June 12, 2010

Joho’s style is broken [solved and fixed]

Alert reader George Janczyn points out the truth I’ve been avoiding: Joho the Blog isn’t sizing correctly. It seems to be of fixed width, with the right-hand column shoved out of the frame. Resizing your window doesn’t resize Joho. That’s true in Firefox, Chrome, and Safari.

It didn’t used to be so. And I haven’t changed anything in my Word Press template. I also can’t find any particular elements of content that are sized too large. I’m stumped.

The body of Joho consists of a table with three columns. The overall table is sized at 95%. The left and right columns are at a fixed 150px because if I made them a percentage, they’d wrap funny. This has not been a problem until a couple of weeks ago. (Yes, I tried laying it out “properly” using floating divs and CSS. After losing a couple of days at it, I figured I was struggling to do with divs exactly what tables were designed to do easily.)

I have tried setting the columns to percentage widths. I have tried setting the middle column to a fixed size. Nothing seems to affect the bad layout. I have inspected the elements on the page using Chrome’s inspector, and have found that the computed width of the table is 1432px, while the style widths I’ve set are not that wide. I’ve also looked at the two inserted graphic elements that happen to be in the blog posts currently displayed, and neither is sized very wide. The problem persists using all of the styles offered at the top of the page next to the “Hard to read?” text.

So, I’m stumped. Any suggestions?

LATER that day: See the comments for the solution. Thanks!

12 Comments »

June 13, 2008

Open up Google Docs?

I’ve found myself using Google Docs more and more. It’s about a Bronze Age word processor at this point, but it makes collaborating easy, I like being able to get at my work from anywhere (even when offline), and the continuous backup and versioning is comforting.

But, not only is Docs way under-featured and butt ugly, Google is fixing it up really slowly.

What would Google have to do to enable The Community to enhance it?

We presumably (i.e., I don’t know what I’m talking about) could write an enhanced system that uses Google Docs for storage, but that slaps a new UI on it and adds features. In fact, maybe this is something that Adobe’s beautiful Air-based word processor, Buzzword, should be (or is?) looking at.

Even better: Google could make Google Docs as amenable to add-ons as Firefox is. Of course, I have no idea how hard that would be, and what the possibilities of terminally screwing up your docs might be.

At the very least, while Google Docs is getting better at allowing us to redefine existing HTML elements, to create new classes, and even to create new elements (albeit without giving us a UI to use these classes or elements, other than entering into HTML editing mode), letting us attach CSS style sheets seems like an obvious and non-destructive improvement.

But, IDKWITA (I don’t know what I’m talking about … and why isn’t that a standard Web acronym?), so there may be obvious technical issues mooting all of the above. But I’m sure that won’t mute you from telling me what I’m missing.

Please. [Tags: ]


Marco Barulli at Clipperz (a password manager) blogs about what it would take to get more freedom and privacy from the providers of Web apps. He has a three-part solution…

4 Comments »