On a site I’ve recently redesigned, GRS Sign Company, their load times have increased because of more images and more posts. Subsequently they noticed that some of the structural layout was loading before it should, then jquery would take over to reorganize.

So I was asked to add in a splash screen. Straightforward enough.

I created a section in the admin backend functions.php file and let them choose yes/no to add splash screen. Using this I altered the header.php to add in the splash section.

Adding a small section inside the $(document).ready() area of the header, I set the splash css display to ‘none’ right at the end after everything had loaded.

DC Fountain didn’t need a great deal of work, it was mostly css tweaks here and there, but given some bugs in plugins that don’t close lists, it proved a little tricky for some pieces. Nevertheless it was a straightforward project and the owner, Dave, was easy to communicate with and knew his site inside and out (which helps a lot).

We’ll start with a simple truth – I code for FireFox (and Chrome) and it seems to have no problems with most code. That being said, there are times where it goes haywire. FF2 and floated elements sometimes have issues.

Anything which says ‘CODE’ means your particular css that you want to be cross-browser.

FireFox | IE6 | IE7 | Opera | Safari

FireFox

This particular hack targets FireFox 1 and FireFox 2.

body:empty CODE { }

This hacks targets FireFox 2 and below, particularly nice and foolproof.

CODE, x:-moz-any-link {
  property: value;
}

This works well.

html>body CODE { }

This one is a newer hack.

html:not([lang*=""]) CODE { }

This one is to be used with the previous hack that used x:-moz-any-link.

/* This is for the FireFox 2 and 1 */
CODE, x:-moz-any-link {
  property: value;
}
/* Then overwrite for Firefox 3 specifically */
CODE, x:-moz-any-link, x:default {
  property: value;
}

This is the surefire method of targetting FireFox though, by using proprietary extensions. Not neat. But, works 100%.

@-moz-document url-prefix() {
  CODE { }
}

IE6

This particular cross-browser cheat is an old one, but still works. Also targets IE5 though.

* html CODE { }

This one (I feel) isn’t as good as the previous one.

body CODE {
  _property: value;
}

IE7

This is another old favourite for IE7.

*+html CODE { }

And here is one that took over from the previous one. This is valid CSS too.

*:first-child+html CODE { }

Since IE6 doesn’t understand the > selector, this one works well. Note the * directly in front of the property. I don’t use this one though since the first one works fine.

html > body CODE {
  *property: value;
}

Opera

This one is a bit more in-depth.

@media all and (min-width:0px) {
  head~body CODE { }
}

And this one targets Opera 9 and below.

html:first-child CODE { }

This one is one of the latest Opera 9 css hacks out:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body CODE { }
}

Safari

Like the proprietary FireFox hacks (above), Safari has one that works 100% with it.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  CODE { }
}

This one is for Safari 3.0+ and is valid css3 so it will eventually be supported by other browsers.

body:first-of-type CODE {
  property:value;
}

For Safari 3.1 this works. This also targets Google Chrome.

body:nth-of-type(1) CODE {
  property: value;
}

It was constructed on the WordPress platform (version 2.3) and using the Revolution theme by Brian Gardner. Obviously, there was a lot of alterations and customisation work, but the site has recently come back under the new look and he is already receiving plenty of congratulations and traffic.

Incidentally a lot of the SEO work was already built in but there was some pieces here and there that have been added to make it a lot more attractive to the search engines for the golf content he offers.