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. When some one searches for his necessary thing, therefore he/she wants to be available that in detail,
    therefore that thing is maintained over here.

  2. Trena says:

    Also visit my web site engagement rings for sale – Trena

  3. I have seen a lot of useful points on your site about pc’s. However, I’ve the thoughts and opinions that notebooks are still not nearly powerful sufficiently to be a sensible choice if you frequently do jobs that require lots of power, for example video editing and enhancing. But for world wide web surfing, statement processing, and a lot other prevalent computer work they are just great, provided you do not mind the little screen size. Many thanks sharing your ideas.

  4. Accumulate your gives you and tailor-make all your family sports activities first aid equipment per each party or trip.

  5. Here is my web page; best place to buy engagement ring (http://yiqibao.cc/)

  6. Poker Online says:

    Hi there i am kavin, its my first time to commenting anywhere, when i read this paragraph i thought i could also create comment
    due to this good article.

  7. Rafael says:

    my webpage :: best place to buy engagement ring – Rafael,

  8. Will says:

    My web site: best place to buy engagement rings online; Will,

  9. Hello, i think that i saw you visited my web site so i came to “return the favor”.I’m trying to
    find things to enhance my website!I suppose its ok to use a few of your ideas!!

  10. Marita says:

    My web site; engagement rings for sale (Marita)

  11. Anitra says:

    I really like what you guys tend to be up too. Such clever work and reporting!
    Keep up the wonderful works guys I’ve added you guys to
    my blogroll.

  12. My website :: buy engagement rings – woodmaket.com,

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