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. ?????????????????????????????????
    ????????????? http://lohmaier-gmbh.de

  2. m88asia says:

    I always used to read piece of writing in news papers
    but now as I am a user of web so from now I am using net
    for posts, thanks to web.

  3. ?????????????????????????????????????????
    ????????????? http://www.cepin.hr/contenthistory

  4. hello!,I like your writing so so much! share we keep in touch more about your post on AOL?
    I require an expert in this area to solve my problem. May be that’s you!
    Having a look ahead to peer you.

    my homepage – Email Harvester

  5. esrbprqw says:

    Style Geekery « d i n a n e . n e t
    aesrbprqw
    esrbprqw http://www.gotdnah1i4m6u5k21c9164465469bgebs.org/
    [url=http://www.gotdnah1i4m6u5k21c9164465469bgebs.org/]uesrbprqw[/url]

  6. He will look on the exchange-rate of the
    currencies in addition to the market issue first that you are investing with.

    Here is my web site; forex ecn brokers australia

  7. Therefore; you need to make sure that you get the accurate data
    about the inflation rate of the given state whose currency you would like to business.

    Look at my blog post: preserve current

  8. a says:

    Hi there, You have done a fantastic job. I will definitely digg it and personally suggest
    to my friends. I am sure they will be benefited from this website.

  9. Can I simply just say what a comfort to find somebody who truly knows what they are talking about online.
    You definitely understand how to bring an issue to light and make it important.
    More and more people really need to look at this and understand this side
    of the story. It’s surprising you’re not more popular since you surely possess the gift.

  10. adult says:

    Hi my loved one! I want to say that this article is amazing, great written and come with almost all important infos.
    I’d like to look more posts like this .

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