Napoleon Syndrome

Apparently Internet Explorer has a problem with its height. All too often, it needs to be told how tall a block element is just to render it remotely properly. Personally I like to tease IE with the fact, taunting it about its height issues by applying the smallest height property I can. The fix here is just to apply:

height: 1%;

to block elements that are having trouble rendering properly (or at all) and they seem to come back to life. This is generally referred to as the “Holly Hack” (look for that title). You may also choose to assign a specific pixel height or something else more indicative, but I don’t like to give IE the satisfaction of making me figure that out.

Put IE in position

You’d be surprised how many floating/positioning problems can be fixed by simply adding

position: relative;

to a CSS definition. Try it. It especially comes in handy when you’ve got overflow defined on some elements, as described by Jonathan Snook over at snook.ca (sexy site BTW).

Broken CSS Attribute Parsing is Your Friend!

The last pair of hacks come care of Internet Exploder’s broken CSS parsing, which does/doesn’t recognize certain attributes, despite their invalid definition. I specifically like the way that this brokenness can be “stacked” to achieve different results in different browsers. An example:

#crazy-div {
position: relative;
left: 0px;
_left: 100px;
*left: 200px;
}

What’s up with all the * and _ business you ask? Well it turns out that those characters are basically ignored by IE, so it will take those rules into account, even though Real Browsers won’t. So that set of rules goes something like this:

1. position: relative; everyone understands and applies this.
2. left: 0px; all browsers get this as well, so it’s applied across the board.
3. _left: 200px; This is the Underscore Hack, which IE 5+ will render properly (IE 7 managed to fix this one), so IE 5 + 6 will move #crazy-div over 100px.
4. *left: 100px; Internet Explorer 7 (only) will ignore the asterisk and render this rule, so #crazy-div will be shifted 200px.

So there you have a decent way to get a set of rules in place that will allow you to target certain (lame) browsers and fix up some of their rendering and positioning problems. I’m sorry that you’ll need to use these hacks, but the Internet is a messy place

Basically what they’ve done is extracted all the color-based information from the admin CSS files, and put them into pluggable files called “Admin Color Schemes”. The cool bit is that it looks really easy to add your own! It looks like the Admin Color Scheme is one of the last (core) stylesheets loaded into a page as well, which means you’re really not limited to only changing the colors.

So how do you do it? Here we go:

1. Download this plugin: WP Admin Color Schemer 1.0
2. Install and enable the plugin, which will look for CSS files inside its own “/schemes/” directory (/wp-content/plugins/wp-admin-color-schemer/schemes/*.css).
3. Create your own CSS file and drop it in that directory. The filename of the CSS file should be a lower-case, letters/numbers only, dash-separated version of the name of the scheme. For example, a scheme called “Billy’s Amazing Scheme” would be in a file named “billy-s-amazing-scheme.css” (replace everything that isn’t a letter or a number with a dash, but only ever have a single dash at a time). Make sure the first line looks like this (with “My Admin Scheme” being the name you want to give your scheme, and each hex value representing one of the main colors used in your CSS palette. This must be the first line of the CSS file, be commented out as below, and must contain commas, but the spaces are optional):

/* My Admin Scheme, #000000, #111111, #222222, #333333 */

Once you’ve done that, go to your profile page within the Admin Panel, and you’ll see your new scheme and should be able to easily select it. When you hit the Update button, your Admin Panel should take on the new colors immediately.

If you’d like to use one of the built-in Admin Color Schemes as a starting point, then they live at /wp-admin/css/colors-classic.css and colors-fresh.css.

Now you can easily style your Admin Panel to match the rest of your site (and hopefully Theme authors out there will start packaging Admin Color Schemes to match their Themes).

Purely by accident, I opened a Google page with my text size set to ‘largest’ and lo and behold, they have modified their HTML to allow for resizing of fonts. Even their AdWords ads resize according to the browser preference.

Looking at the source, it looks like they are slowly moving towards a CSS-based layout/design, although they still have a ways to go. Incidentally, I did a copy of their layout with CSS for an internal search engine that I built and it wasn’t that hard at all, their design even lends itself to being done with DIVs, UL/LIs and A tags, styled up with CSS.

So here’s their style definition on a results page now-days;

body,td,div,.p,a{font-family:arial,sans-serif }
div,td{color:#000}
.f,.fl:link{color:#6f6f6f}
a:link,.w,a.w:link,.w a:link{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:#f00}
.t a:link,.t a:active,.t a:visited,.t{color:#ffffff}
.t{background-color:#3366cc}
.h{color:#3366cc}
.i,.i:link{color:#a90a08}
.a,.a:link{color:#008000}
.z{display:none}
div.n {margin-top: 1ex}
.n a{font-size:10pt; color:#000}
.n .i{font-size:10pt; font-weight:bold}
.q a:visited,.q a:link,.q a:active,.q {color: #00c; text-decoration: none;}
.b{font-size: 12pt; color:#00c; font-weight:bold}
.ch{cursor:pointer;cursor:hand}
.e{margin-top: .75em; margin-bottom: .75em}
.g{margin-top: 1em; margin-bottom: 1em}

As you can see, they are not defining a font size for a lot of their elements, which is a good move, as it will inherit the browser settings automatically. One thing that I did notice is that the fixed-size fonts they are using (“.n a” and “.n .i”) are only applied to the numbers used for the links to different pages of results. I am assuming that they have done this because otherwise there’s the potential that thei cool little string of ‘o’s will be messed up from font sizing

Good Work Google! Good to see more of the big-boys embracing CSS design, I just hope that they continue down this path and have a completely CSS-driven design in the near future, browsers are almost up to speed so that it’s a valid move for them I think.

So far, so good.

This whole site is now presented using XHTML and CSS, with no (layout) tables at all. If you view the source, you will see that the code is quite clean as well – I have laid out the source in a manner which makes it more friendly to people using text-only browsers like Lynx, or to people with no style sheet support in general. I have put the content first, and then worked from there, towards the less-important navigation elements etc.