CSS
960 Grid System
As you might have heard, I recently launched a site for the templates that I created to use in my personal and professional projects. For lack of a better name, and because the numerals made for a nice logo, I’ve decided to simply refer to it as the 960 Grid System.
Accessible Display: None
Update: According to accessibility expert James Edwards, the screen reader Window Eyes has problems reading content that is contained in elements with 0 dimensions and overflow: hidden.
PNG Overlay
PNG Overlay: Example | Download (44 KB)
Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? For instance, you might add a drop-shadow, rounded corners (maybe both) or some other graphical effects applied to the images.
Clearing Floats
If you are already a seasoned CSS veteran, feel free to stop reading now. That being said, from time to time via email, in-person conversations, or on the Godbit forum, the question of how to clear floated elements is a reoccurring one.
Consistent Form Styling
Well, there’s only about an hour left before I leave for Gospelcon, and I am gitting a bit nervous about giving my presentation. I am sure it will go well, and have my Apple Keynote slideshow all prepared. I will be posting that after I present, as I might be adding slight tweaks here or there as I think of them.
Anyway, I just had a thought that I wanted to share real quick, and that’s styling form elements consistently. By default, this is what the input and textarea look like for most browsers.
Hoverbox IE7 Fix
Okay, so now that Internet Explorer 7 is pretty much solidified in how the CSS rendering will perform, I figured it was high time I respond to all these emails I keep getting about Hoverbox not working. I fiddled with the CSS for a bit this evening, to no avail. As far as I could tell, if the * html hack was fixed in IE7, and the rendering was given an overhaul, it should have worked just like any good browser.
Styling HR
I did not ever stop to think that styling horizontal rules with CSS could pose much of a problem, until I saw this article over at the newly launched Bite Size Standards website, entitled Styling horizontal rules with CSS. While Nathan Pitman’s solution certainly is creative, it is pretty much unnecessary.
Now, I say this not to knock or make fun of his talent or proficiency as a web designer, but felt I should share a simple way to do it, that works in cross browser situations.
Solving the Image Float
This is so simple, I’m wondering why I hadn’t thought of it before. Chances are, someone out there already has, but I thought I would share it here. Awhile back, though I couldn’t seem to find his post, Bryan Veloso was bemoaning the fact that in order to have nicely presented articles with images, it required adding a class name to the image. This created a problem, because if you re-design or change your naming conventions, you have to go back through and clean up your articles.
Flickr + Hoverbox
For awhile now, I have been struggling to get my Flickr photos working with my own Hoverbox CSS image roll-over technique (go ahead – make fun of me). The problem I was running into is this: Flickr photos are written dynamically to the DOM by JavaScript. As such, there is pre-determined code that is defined, which is un-touchable.
Hoverbox Image Gallery
Update: Hoverbox code is free to use, so do with it whatever you want in your own projects. I just ask that you not redistribute the code via template sharing repositories, because I occasionally make updates to ensure multiple browser compatibility.