Style Geekery

If you are not a fan of programming and making pretty websites, this is not the post for you. But if you can get really excited about making a website look the SAME in all browsers, this is the post for you! I just successfully added some PHP to my WordPress theme, along with some tiny CSS tweaks, which allowed me to fix the bane of my existence – the extra space or lack of space above the left hand side of this site.

See, due to stupidity in the CSS rendering engines, my site didn’t look quite the same in every browser. Soooo close, but no cigar. In IE, the space between the headings and the content was too big. In Firefox on the Mac, there was no space at all. But every other browser I tried agreed on the placement that I wanted. And it has always irked me. But I hate the way that browser testing is usually done with CSS – counting on one bug to fix another.

So finally, I spent some time with the Google. I learned about all kinds of mechanisms, both server- and client-side, and found many to just not work. But then I came across this site, where the writer shows some variables that WordPress makes available. His solution is quite elegant, designed specifically for WordPress, and almost perfect.

I say almost, because it doesn’t differentiate the OS. Since I have a problem specifically with Firefox on a Mac, I really needed that. So I updated his function to suit my needs. Here it is, in all it’s simple glory:

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'browser_lynx';
	elseif($is_gecko) $classes[] = 'browser_gecko';
	elseif($is_opera) $classes[] = 'browser_opera';
	elseif($is_NS4) $classes[] = 'browser_ns4';
	elseif($is_safari) $classes[] = 'browser_safari';
	elseif($is_chrome) $classes[] = 'browser_chrome';
	elseif($is_IE) $classes[] = 'browser_ie';
	else $classes[] = 'browser_unknown';

	if($is_iphone) $classes[] = 'mobile_iphone';

	if(strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') !== false) $classes[] = 'os_mac';
	elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Win') !== false) $classes[] = 'os_win';
	elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Linux') !== false) $classes[] = 'os_linux';
	else $classes[] = 'os_unknown';

	return $classes;
}

I simply added that to my theme’s functions.php, and the magic happened. What it does is add some classes to the body, which is already being populated by WordPress’ body_class() function. I took the example provided by Nathan Rice, and just added a few things that I needed and preferred. So now that my body tag includes the information I need, I was able to update my CSS thusly:

#content
{
   width:            654px;
   border:           0px;
   margin:           0px;
   padding:          0px;
   position:         absolute;
   top:              59px;
}

.browser_ie.os_win #content
{
   top:              57px;
}

.browser_gecko.os_mac #content
{
   top:              61px;
}

And finally, my website looks right on all the browsers I ever use. And that makes me happy.

February 11th, 2010 • 12:16 pm • dinane • Posted in Site

No Responses to “Style Geekery”

  1. uvizo.com says:

    I loved as much as you will receive carried out right
    here. The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an edginess over that you wish be delivering the
    following. unwell unquestionably come further formerly again as
    exactly the same nearly a lot often inside case you shield this hike.

  2. Hello, I wish for to subscribe for this weblog to obtain latest updates, thus
    where can i do it please help.

  3. Fanny says:

    Pretty section of content. I just stumbled upon your website
    and in accession capital to assert that I get actually enjoyed account
    your blog posts. Any way I’ll be subscribing to
    your augment and even I achievement you access consistently fast.

    Also visit my webpage … mooiste plek in frankrijk
    (Fanny)

  4. Wonderful beat ! I wish to apprentice while you amend your website, how could i subscribe for a blog site?
    The account helped me a acceptable deal. I had been a little bit acquainted of this
    your broadcast provided bright clear idea

  5. Duragate Baby Saf?ty Gate (Style MG 15) The Duragate (Ve?sion MG 25) was produced along w?t? an easy positi?ning system, really quick and easy to
    as?emble and will install at any angle. This entrance additionally includes all
    steel deve?opment along with a grain lay?red finish.
    The Duragate is accessible in ?hite as wel? as B?ige.

    my webpage; mesh baby gate wit? door (http://web.wenidc.com/comment/html/index.php?page=1&id=51766)

  6. Hi there excellent blog! Does running a blog
    similar to this take a lot of work? I’ve no understanding
    of programming however I was hoping to start my own blog soon. Anyhow,
    should you have any suggestions or tips for
    new blog owners please share. I know this is off topic but I simply needed to ask.
    Thanks!

  7. hi!,I love your writing so so much! percentage we keep in touch more about your article on AOL?

    I require an expert in this space to resolve my problem.

    May be that’s you! Taking a look forward to
    see you.

  8. Mellissa says:

    Wonderful goods from you, man. I have understand your stuff previous
    to and you are just extremely magnificent. I actually like what you’ve acquired here, certainly
    like what you’re stating and the way in which you say it.
    You make it enjoyable and you still take care of to keep it smart.
    I can’t wait to read far more from you. This is actually a tremendous site.

  9. U?ban area ?rganizers, in the surge to d?velop grander,
    a lot more bona fi?e bl?ds (along with all their automobile le?al rights as well as opportuniti?s), progres?ively found ways to craft around all of them, as well as most wer? ultimately rele?ated to whimsica? home second thoughts.

    Look into my site :: long Pet Gate

  10. I truly love your blog.. Great colors & theme. Did you build this
    amazing site yourself? Please reply back as I’m attempting to create my own personal site and
    would love to find out where you got this from or exactly what the
    theme is named. Cheers!

Leave a Reply

Thank you for visiting d i n a n e . n e t!
Powered by WordPress • Protected by Spam Karma • Hosted on Bluehost • Validated as XHTML 1.0 Strict