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

    Ahaa, its fastidious dialogue concerning this article here at this weblog, I have read all that, so at this time me also commenting at this place.

  2. Unquestionably consider that that you said. Your favorite reason seemed to be at the web the simplest thing to take note of. I say to you, I certainly get irked even as other people think about worries that they just do not recognize about. You managed to hit the nail upon the highest as well as defined out the entire thing with no need side effect , other folks can take a signal. Will probably be back to gt more. Thank you
    ray ban rb 8307 http://www.naturalmenteumbria.it/?it-9894_ray-ban-rb-8307.html

  3. I must thank you for the efforts you have put in penning this blog. I am hoping to view the same high-grade blog posts from you in the future as well. In fact, your creative writing abilities has encouraged me to get my own website now ;)

  4. I am sure this piece of writing has touched all the internet people, its really really pleasant paragraph on building up new weblog.

  5. Thanks for sharing your thoughts on %meta_keyword%. Regards
    Occhiali da Sole Dior SO REAL/S Donne Argento Chiaro Outlet S0253 http://www.renatobilli.com/?it-18565_occhiali-da-sole-dior-so-reals-donne-argento-chiaro-outlet-s0253-p-477.html

  6. Fruit Shop makes it possible to win up to ?/ EUR/$80,000
    with great deals of free spins, wilds and also multipliers.

    Take a look at my web blog :: sustain regulatory

  7. Thank you Lindsay. Though it looks like along way From the the night time. Looking you and your Mom effectively.

  8. a cartoon is being done by me webliography for a course in senior high school and an online newsletter was needed by us. I liked up the set of one’s website and the notion of it being fellow modified, so it was applied by me in my own display.

  9. Paragraph writing is also a fun, if you be familiar with afterward you can write if not it is complicated to write.

  10. The national voice for America’s hikers, American hiking stick reviews Culture ensures as well as secures foot paths, surrounding organic locations,
    and the treking experience.

  11. I was recommended this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You’re wonderful! Thanks!
    nike air force 1 60 euro http://www.pragmatika.it/wp-content/uploads/it.php?it-1530_nike-air-force-1-60-euro.html

  12. Mid roll ads says:

    Continue to keep the-art along with the roots of animation alive, the good work guys! It’s essential that we transfer using the occasions and enjoy how evolution permits and improvements, but also we understand how we got there!

  13. Thank you Lindsay. I recall the night although it looks like along way. Looking your Mum and you well.

  14. Great topic and well written. Do you have any more resources about this that you reccommend?

  15. I’ve always been fascinated by cartoon, it is a good resource packed with some quality forms on the subject. Congratulations.

  16. ????????????????????????????????
    ????????????? http://www.ones.cat/custom

  17. ?? ?? says:

    ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????20?30??????????????????????????????????????? ???????????????????????????????????????????????????????????????????????????????????????????????????????????????

  18. Do you wish you could save lots of money by utilizing coupons effectively? You have the power to do what they do! You may find yourself purchasing more and paying much less on your next shopping trip if you make use of the coupon advice presented here.
    michael kors factory outlet http://www.mi-career.com/

  19. Great topic and well written. Do you have any more resources about this that you
    reccommend?

  20. Ashley: I was the Advertising and marketing Planner at
    Virool, an advertisement technology startup in San Francisco,
    concentrating on programmatic on-line video clip distribution system.

    My web-site gauravgatha.org

  21. Great topic and well written. Do you have any
    more resources about this that you reccommend?

  22. If you want to take a great deal from this piece of writing then you have to apply such strategies to your won webpage.
    mallas nike mujer http://www.ccinf.es/?es-308_mallas-nike-mujer.html

  23. Great topic and well written. Do you have
    any more resources about this that you reccommend?

  24. Greetings! I’ve been following your blog for a while now and finally got the courage to go ahead and give you a shout out from Houston Tx! Just wanted to tell you keep up the great work!

  25. Dorine says:

    Great topic and well written. Do you have any more resources about this that
    you reccommend?

  26. Great topic and well written. Do you have any more
    resources about this that you reccommend?

  27. Hiya very cool blog!! Guy .. Excellent .. Superb ..
    I’ll bookmark your blog and take the feeds also?
    I am happy to search out numerous useful information here in the post, we want work
    out extra strategies in this regard, thanks for sharing. .
    . . . .

  28. For this reason, experimenting with boots along with socks is frequently valuable, as you would
    certainly never ever be wearing footwears or boots without socks!

    Feel free to surf to my web site :: hammock camping

  29. Hi there every one, here every person is sharing these kinds of knowledge, thus it’s good to read this webpage, and I used to pay a visit this blog everyday.
    Dividir populares gafas de sol Oakley Chaqueta punto de venta 75105 http://travailderue.org/es/?es-21889_dividir-populares-gafas-de-sol-oakley-chaqueta-punto-de-venta-75105-p-2994.html

  30. ????? says:

    ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????6????????????????????

  31. Excellent post. I was checking constantly this blog and I am impressed! Extremely helpful info specifically the last part :) I care for such info much. I was looking for this particular info for a long time. Thank you and best of luck.

  32. hcg drops says:

    I always spent my half an hour to read this blog’s articles every day along with a mug of coffee.

    Feel free to visit my page :: hcg drops

  33. I pay a quick visit every day a few blogs and blogs to read posts, except this weblog gives quality based articles.
    bulk oakley sunglasses http://www.hotrodscustomstuff.com/?us-14241_bulk-oakley-sunglasses.html

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