hellorobot.org

When an anchor is clicked in Firefox, the browser puts a 1-pixel, black, dotted border around the element. For the control freak seeking a flawless design, for pages where links manipulate the DOM but don’t load another URI, that dotted border can look silly, ugly even.

Getting rid of it is actually very easy. More importantly, should you get rid of it?

The design/layout of hellorobot.org is a modified version of the Grid Focus WordPress theme – a fairly extensive modification, but the same basic structure. And although this blog is a smaller width and uses a different menu style, adding a header image to the default Grid Focus theme is not much different than it was here.

I think you’ll find that adding a header image is pretty simple, really. It requires editing two files: first, the header.php file; and second, the style.css file. Both are found in the ../wp-content/themes/grid_focus_public/ folder. You can edit these files in a simple text editor like Notepad on Windows or TextEdit in Mac OS.

I am not a designer. For me, creating a good-looking site design is a long and tedious task of trial and error. So one of the things I’m learning to love about building a site in an open-source CMS platform like WordPress is the number of free designs available. And some of them are even good!

Check out this list from Smashing Magazine. It’s where I found Derek Punsalan’s Grid Focus, which I loved for its clean and neutral look. I like the hyper-organization of it.

What follows is an ongoing documentation of the changes, customizations, updates that I am making to hellorobot.org’s Grid Focus install. Hopefully, some of these changes are for the better.

Microsoft’s holiday present to developers: Internet Explorer 8 passes the Acid2 test.

I learned what I know of (X)HTML, CSS, PHP, et al., on my own – through trial and error, through a few good books, through online tutorials. One of the side effects of learning this way is a lack of an awareness of institutionally-approved standards.

There is no proper way to organize a CSS stylesheet, I suppose, but I’m sure that if I had learned CSS in school I would have (by choice or by requirement) adopted a professor’s or department’s standard. Instead, I made up my own, and then joined the corporate world and discovered, well, mine’s not the norm.

I like to organize my stylesheets so that all of the declarations for one selector are on one line. I find it easier to scan and, thereby, easier to update and maintain.

The root of the problem is whether or not an element “has layout.” Now, “layout” is a completely made-up, IE-specific attribute not attended to in any manner by the other browsers. It’s bunk. But it provides the solution to the broken borders issue.

To enforce proper border behavior in IE, the floated elements need to “have layout.” If validation doesn’t matter, the quickest solution may be to add “zoom:1″ to the element. If validation does matter, you can give an element layout by setting “position:absolute” or giving the “height” or “width” attributes something other than auto.

Why oh why, is that element displayed like that when I cleary wrote the CSS to display it like this?! Mostly, in these situations, the browser’s got it right, and I’m the bumbling doofus. Too many times, my error lies in a mishandling of CSS specificity.

I love that CSS allows for multiple class names, and I assign them often. It’s a great way to mark alternating rows in a table-like structure, for instance, or to mark up panels on a page that are exactly alike but for one attribute. But since two class definitions have equal specificity, the exact element reference and location within the CSS determines the output.