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. Scyther says:

    Hey! I know this is kinda off topic but I was wondering
    which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at options
    for another platform. I would be awesome if you could point me
    in the direction of a good platform.

  2. We offers sexy feamle escorts for hot elite peoples. http://www.xxxgayjobs.com/blog_view.php?id=238

  3. Since the admin of this web page is working, no hesitation very shortly it will be well-known, due to its feature
    contents.

  4. Le cylindre de charbon renfermait lui-meme un bocal de porcelaine poreuse contenant de l’eau acidulee a quinze
    degres a l’aide d’acide sulfurique, et un cylindre d’amalgame de
    zinc plongeant dans l’eau acidulee. magasin bio en ligne Fox,
    Sheridan, Tierney, aux lords Grey et Holland, lui adressant ces pressantes questions a la face de l’Angleterre, epouvantee du nombre de ses ennemis, et troublee par les cris d’un peuple affame demandant du pain sans l’obtenir.

  5. ??????? says:

    ??????????????????
    ????????????????????????????????????????
    ????????????????????????????
    ????????????????????????????
    ???????????????
    ??????????????
    ??????????????????
    ??????????????
    ??????????????????
    ????????????????????
    ?????????????????
    ???????????????
    ?????????????????
    ???????????
    ????????????

  6. Janina says:

    I needed to thank you for this good read!! I absolutely loved every bit of
    it. I’ve got you book marked to check out new stuff you post…

  7. DO – Take remaining hazardous house chemicals to your authorized contaminated materials collection facility for disposal.

    Also visit my page – septic system design maine (streetfighterguide.com)

  8. Using a septic systems types virginia (http://winnergreen.kr/?document_srl=691646) system is not, in everyday practice, a lot various from common plumbing besides,
    for a lot of the important things that will keep your septic tank
    working well coincide levelheaded points that will keep all
    your pipes clog-and-trouble-free.

  9. Only a trained professional with a self-supporting breathing device should go
    into a septic system design requirements, http://blog.toorako.com/,
    system.

  10. Spot on with this write-up, I seriously feel this web site needs far
    more attention. I’ll probably be back again to read more, thanks for the
    info!

  11. Debora says:

    It is responsible for the facility and upkeep of a register of examiners
    which is offered to the neighborhood authorities.

    My website – septic systems design ontario (Debora)

  12. Bell says:

    Be sure the septic systems design guide (Bell) tank’s
    manhole cover is safe and secure which examination ports have not been blocked or destroyed.

  13. say thanks to so a lota lot for your website it aids a great deal
    fifa 17 coins http://muslimjobs.pro/blogs/78/414/fifa-17-points-account-into-these-cities

  14. Rashad says:

    Hi, yes this post is really fastidious and I have learned lot of things from it regarding blogging.
    thanks.

  15. Thanks intended for offering these kinds of superb details

  16. fifa coins says:

    Great web sitewebsite! It looks very professional! Keep up the great job!

  17. Review PhenQ says:

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

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