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. blog article says:

    It’s very simple to find out any topic on net as
    compared to books, as I found this article at this web
    site.

  2. Chelsea says:

    My weblog; gold ira (Chelsea)

  3. Howdy very cool web site!! Man .. Excellent ..
    Amazing .. I’ll bookmark your site and take the feeds additionally?
    I am happy to search out so many helpful info right here in the post, we want work out more techniques on this regard,
    thank you for sharing. . . . . .

  4. Kerrie says:

    Also visit my blog post regal assets reviews (Kerrie)

  5. Wow, this article is nice, my sister is analyzing such things, thus I am going to
    let know her.

  6. WT says:

    Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot
    of spam feedback? If so how do you stop it, any plugin or anything you can recommend?
    I get so much lately it’s driving me insane so any support is
    very much appreciated.

    My website;

  7. Internet kitchen appliances are on higher demand, than ever before,
    as one can avoid the weekend headache shopping in a bustling local retail stores.
    There are ample amount of retailer site that are selling
    the same product at a lesser price, which will be of a greater
    benefit. As an alternative to warming every part of the home you may perhaps consider
    warming just those spots that are really being used.

    my blog … best electric pressure cooker

  8. Imagina se você tivesse que investir muito tempo,
    muito dinheiro, muita energia pra fazer um curso a distância?

  9. La Asociación de Fotógrafos Profesionales de España (AFP) creada en 1984, es en la actualidad la única asociación de ámbito estatal que asocia a los fotógrafos profesionales en defensa común de sus intereses. Los becados van a tener la oportunidad de vivir el concepto de inmersión que preconiza la Escuela TAI, es decir, el disfrute experiencial, de modo permanente, del mundo de la imagen (y de sus procesos de ideación y producción), para llegar a dominar plenamente su idioma, desde la perfección creativa y con resultados profesionales considerados a nivel internacional.

  10. Good web site you have here.. It’s hard to find high quality writing
    like yours these days. I truly appreciate people like you!

    Take care!!

  11. Very nice article, exactly what I needed.

  12. hacking says:

    “Well, Online casino X just another website about best online casino”, – a
    visitor may think. They would be wrong, though.

    Our goal is to become the biggest hacker and internet criminals we
    can be. We hack the internet and make money promoting casinos.
    With growing popularity and number of best online casinos,
    it’s getting harder to select the best and most interesting ones.
    That is why we intend to destroy the industry even more.
    We do this by hacking as many websites as we can. We promote 888 Casino
    Spin Palace Casino
    Eurogrand Casino
    Winner Casino
    William Hill Casino

    And they risk their licenses because of that, but we do not care.

    888 Casino,Spin Palace Casino ,Eurogrand Casino ,Winner Casino ,William Hill Casino
    888 Casino,Spin Palace Casino ,Eurogrand Casino ,Winner
    Casino ,William Hill Casino

    With growing popularity and number of best online casinos, it’s getting harder to select the best
    and most interesting ones. There are too may details to
    consider, too many games, and too many rules in the best
    casino online. Even bonuses that are supposed to attract players sometimes contribute to overall confusion due
    to their complicated rules. With our help, even a beginning player will be able to understand all these issues and
    find best casinos online USA.

  13. Excellent beat ! I wish to apprentice while you amend your site, how could i subscribe
    for a weblog web site? The account aided me a appropriate deal.
    I had been a little bit familiar of this your broadcast
    provided brilliant clear concept

  14. m88ind says:

    Simply desire to say your article is as surprising.
    The clarity to your publish is just great and that i could assume you are a professional on this subject.
    Well with your permission allow me to take hold of your RSS feed to stay up to date with imminent post.
    Thank you a million and please carry on the enjoyable work.

  15. Jacklyn says:

    É realmente bem completo curso.

  16. Nuestro servicio tecnico colaborador trabaja con las principales marcas de electrodomesticos, como Bosch, Siemenes, Balay, AEG, Zanushi, Fagor, Hotpoint, Samsung, LG, Otsein, etc.

  17. chick says:

    Hi, its good piece of writing regarding media print, we all be aware of media is a fantastic source of information.

  18. SAT says:

    Nunca reparar una electrodomésticos de marca Blanca fue tan fácil y sencillo, llámenos y consúltenos, estaremos encantados de ofrecerle nuestros servicios de reparación de Marca Blanca en Madrid, 20 años de experiencia nos avalan. La meta de nuestra empresa es lograr y conservar su confianza, por ello, nuestro SERVICIO TÉCNICO ESPECIALISTA EN Aire Acondicionado Sampo garantiza transparencia y lealtad hacia usted. Para línea blanca y similares: Treinta minutos del valor del tiempo de trabajo a que se refiere el artículo 8.1.1.

  19. delhi escort says:

    Excellent way of describing, and nice post to get data about
    my presentation subject matter, which i am going to deliver in academy.

  20. Hi my friend! I wish to say that this article is amazing,
    great written and come with almost all significant infos.
    I would like to look extra posts like this .

  21. The handbags are the best part of the 2012 resort look.
    Generally speaking, the bags are either a bit plain,
    insanely expensive, or more frequently both. Avelle points out that
    renting designer handbags makes sense for a lot of reasons.

    My blog post; cheap prada bags

  22. blog article says:

    Does your website have a contact page? I’m having trouble locating it but, I’d like
    to send you an email. I’ve got some recommendations for your
    blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.

  23. sex is good says:

    Having read this I thought it was rather enlightening.
    I appreciate you spending some time and effort to
    put this content together. I once again find myself personally spending
    way too much time both reading and commenting.
    But so what, it was still worth it!

  24. Dimensional changes from the release of residual stresses and the inability
    to easily touch up parts are the downfall to powder paint.

  25. I know this if off topic but I’m looking into starting my own weblog and was curious what
    all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% sure.

    Any suggestions or advice would be greatly appreciated.
    Thanks

  26. WOW just what I was looking for. Came here by searching for máy u?n ?ng th?y l?c

  27. WOW just what I was looking for. Came here by searching for máy u?n ?ng th?y l?c

  28. Organic cotton, hemp and jute are the main fabric fibers used while
    the hardware used is nickle free. However, there are
    certain manufacturers that are known for producing high quality sneakers.
    It comes with flat heels and is built with quality material
    for rough use.

    My homepage louboutin male shoes

  29. You’re s? interesting! I don’t think I’ve truly read ? single th?nbg l?ke that before.
    So great to discover someone with genuine thoughts on this issue.
    Seriously.. thanks forr starting this up. This w?bsite i? one
    thing that is required on th? web, someone with a little or?ginality!

  30. Chrinstine says:

    Way cool! Some extremely valid points! I appreciate you penning
    this article and also the rest of the site is really good.

    My site … Chrinstine

  31. delhi escort says:

    I blog often and I seriously thank you for your information. This
    article has truly peaked my interest. I will book mark your site and keep checking for new information about once per week.
    I opted in for your Feed as well.

  32. Company new says:

    WOW just what I was looking for. Came here by searching for omni wheel

  33. It will help you immediately ascertain if there are issues that need to
    be addressed without further delay. If you look
    east to Asia higher protein feeds and high protein natural foods used for baits and for
    feeding cultured fish also figure highly over the
    centuries and soya bean is still in major use increasingly so all around the world.

    The bank’s move came after Hicks and Gillett tried to block the sale of the club to New England Sports Ventures by removing
    managing director Christian Purslow and commercial director Ian Ayre from the
    board.

  34. mkfhhvrejz says:

    Style Geekery « d i n a n e . n e t
    [url=http://www.gprztm2399414653n4fq6sth1o9n2t2gs.org/]umkfhhvrejz[/url]
    amkfhhvrejz
    mkfhhvrejz http://www.gprztm2399414653n4fq6sth1o9n2t2gs.org/

  35. cell phone says:

    Greetings! I know this is kinda off topic however I’d figured I’d
    ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa?
    My website covers a lot of the same topics as yours and I think we could greatly benefit from each other.

    If you might be interested feel free to shoot me an email.
    I look forward to hearing from you! Awesome blog by the way!

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