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. Alpaca rugs says:

    I believe what you published made a great deal of sense.
    However, consider this, what if you added a little information? I
    mean, I don’t wish to tell you how to run your website,
    but suppose you added something that makes people want more?
    I mean Style Geekery « d i n a n e . n e t is a little vanilla.
    You could glance at Yahoo’s front page and watch how they create news headlines
    to grab people to click. You might add a video or a related pic or
    two to get people excited about everything’ve got to say.
    In my opinion, it might bring your website a little livelier.

  2. Hey there just wanted to give you a quick heads up and let
    you know a few of the pictures aren’t loading
    properly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different web browsers and both show the same results.

  3. hvac system says:

    Hi, There’s no doubt that your website could
    be having browser compatibility problems. When I look at your blog in Safari,
    it looks fine however when opening in Internet Explorer,
    it’s got some overlapping issues. I merely wanted to provide you with a quick heads up!
    Apart from that, wonderful website!

  4. Fort d’une solide expérience dans le secteur, ils sont un partenaire compétent pour tout ce qui concerne les techniques de plomberie

  5. un partenaire compétent pour tout ce qui concerne les techniques de plomberie

  6. sex toys says:

    Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyways, just wanted to say superb
    blog!

  7. You’re in reality an excellent webmaster. The website loading pace is outstanding.

    It appears that you’re doing any distinctive trick. Also, the contents
    are a masterpiece. you’ve performed a fantastic task on this subject!

    Also visit my weblog – love readings free online

  8. Adoring the information on this web site, you have done an excellent job on the blog articles.

    Also visit my web blog; phone psychic reading

  9. Genevieve says:

    May I just say what a relief to find somebody that
    really understands what they’re discussing over the internet.
    You actually know how to bring a problem to light and make it important.
    A lot more people really need to look at this and
    understand this side of the story. I was surprised that you’re not more popular because you definitely possess the gift.

  10. I got what you mean, thank you for posting. Woh I am glad to find this site.

    my weblog :: psychic advice

  11. I have been checking out a few of your stories
    and i must say good stuff. I will certainly bookmark your site.

    My site :: phone psychic reading

  12. psycick says:

    Adoring the info on this site, you have done a great job on the blog
    articles.

    My blog post … psycick

  13. eokgjgiedh says:

    Style Geekery « d i n a n e . n e t
    aeokgjgiedh
    eokgjgiedh http://www.g72mc3n5xlgx659y149abt6873x8cm2us.org/
    [url=http://www.g72mc3n5xlgx659y149abt6873x8cm2us.org/]ueokgjgiedh[/url]

  14. I was phone psychic reading some of your content
    on this website and I think this internet site is very useful!
    Keep on posting.

  15. Some genuinely nice stuff on this web site, I enjoy it.

    Also visit my website: phone psychic reading

  16. Awesome post, you have stated some excellent points , I additionally think this a
    really excellent website.

    Look at my blog phone psychic reading

  17. Lokebat says:

    Dude, this is really cool! You definitely come with awesome articles. Thanks a bunch for sharing with us your web-site.

  18. I am regular reader, how are you everybody? This post posted at
    this website is really fastidious.

  19. WOW just what I was searching for. Came here by searching for a

    Look into my web blog: staff agencies

  20. jobs says:

    I think this is among the most vital info for me.
    And i am glad reading your article. But should
    remark on some general things, The website style is wonderful, the articles is
    really excellent : D. Good job, cheers

    Feel free to surf to my web site; jobs

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