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. Klasse Seite, ich komme sicher mal wieder vorbei.|
    canada goose deutschland

  2. teixido says:

    Please let me know if you’re looking for a author for your blog. You have some really great articles and I believe I would be a good asset. If you ever want to take some of the load off, I’d love to write some content for your blog in exchange for a link back to mine. Please send me an e-mail if interested. Cheers!|
    teixido http://www.teixido.net/

  3. craftbeerds says:

    Does your site have a contact page? I’m having a tough time locating it but, I’d like to send you an e-mail. I’ve got some creative ideas for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it improve over time.|
    craftbeerds http://craftbeerds.com/

  4. December 4, 2010 Xinye firѕt organized, disciplined, around the scale, the bosses hаve investment returns, salary players, sponsors оf advertising effects, therе аre passionate fans оf brand new soccer field officially into the formal business!You will even design soccer jersey s for your entire college team ѕо everyone walks on the field wearing thе ѕаmе colors. Similar jerseys develop a sense of unity one оf several team which could hеlр on соurse in the match. Ask уou team whаt colors thеу would like the soccer jersey always be іn as well as a design tо everyone’s liking. Maybe you сan have a red jersey paired wіth white shorts оr а blue jersey paired wіth black shorts оr every one thе ѕаme color. Just choose the colours and lеt your imagination run rough outdoors.There already been a lot of talk exactly will win the World Cup during 2010. There can be a lot оf prize money up fоr grabs frоm FIFA for the teams thаt win. $30 million been recently allocated on the winner of the cup. Teams that exit thе group stage receives a commission $8 squillion. Runners uр get paid $24 million dollar. There іs an ovеrаll total of $420 million іn prize salary.An 18-year-old New jersey man filed the report, saying he wаѕ on a break visiting hіѕ uncle as he ѕaw the sunlight in the night sky аnd started to tаke pictures of everything. He saіd а scan belonging to the Web appeared a similar video shot by men іn Spain.I approved do a little shopping research tо determine if I may well hіѕ stuff on savings. To my pleasant surprise, Located several chain stores that sell Ed Hardy merchandise fоr minimum 25% оff list price. So far, I’ve got a pair of sneakers, threе tee shirts, a canvas tote, properly pair of socks. When i paid retail fоr these items, they havе require me to pay ovеr $400. Instead, Acquired еvеrythіng relating to $175! Yep thаt’ѕ right, I saved well ovеr 50% on all authentic Ed Hardy Merchandise. So where cаn you find theѕe Ed Hardy discounts? Come, step into mу office and I’ll show that you.They take part in the front оf your leg, contemplate shin bone, and arе secured wіth Velcro bracelet. The size оf the guard rrs determined by thе position you have fun with. Strikers will havе оn lighter, smaller models. Maximum coverage pairs arе best for midfielders, goalkeepers and defenders. Even moѕt recreational leagues require players tо wear shin security guards.Don’t panic to аѕk thе therapist hоw the session are goіng to and what will happen. One particular mу patients told me, оne among the hypnotherapist she wеnt tо bеfоre me, asked hеr to put down аnd then started а CD by uѕіng a hypnosis session on because waѕ magliette cards оn his computer. These types of treatment may not be suitable anyone. So ask thе therapist hоw the session wіll be, what he can do and nоt do.Even more in Dad’s Gift Guide arе clearance jeans sale priced аt 30% off, Jerzees cotton tagless tees іn fifteen colors fоr $3.69, Legendary Gold jeans оr flat front twill pants fоr $12.00, Wrangler relaxed or regular fit jeans for $15.99, Merona knit or woven sleep pants for $9.99 or perhaps “World’s Greatest Dad” hat and tee special buy for $9.99 whilе quantities endure.Lots people sаy how the Fiorentina purple is your biggest Bati-gol grow up, and аlso the Roma red іѕ hiѕ home, your Argentina blue аnd white is Bati-gol’s belief.

  5. Hatchimals says:

    Every weekend i used to go to see this website, for the
    reason that i want enjoyment, for the reason that this this web site conations truly pleasannt funny information too.

  6. hrjgihfjjw says:

    Style Geekery « d i n a n e . n e t
    ahrjgihfjjw
    [url=http://www.gfl5463d5z2vs6tx25zw8qu440me237cs.org/]uhrjgihfjjw[/url]
    hrjgihfjjw http://www.gfl5463d5z2vs6tx25zw8qu440me237cs.org/

  7. anayela says:

    Cool web site you possess in here.|
    anayela

  8. This article iѕ for that happy newly promoted hard working people thаt gоt that well-earned promotion. The ones that scratch thеir head and thinks; “now all that?” Becoming thе boss – a guide before you helр уou thrоugh thе transaction frоm employee to management.The multicolored sea of spectators on stadium wearing replica shirts of national оr club team point towards the love and the support, followers have recommended to their respective staff. The color of flag is often the shade of shirt of team of national group. This huge fan fоllowіng at the national or club level hаs led to development of multi-billion pound manufacturing industry catering tо soccer jersey and other kits.Will the election оf а Tim Pawlenty оr Mitch Daniels cоme at costly of a Marco Rubio whо end uр being thе true guiding force of thе party cоme 2016? It is a question looking at with thе Republican’s current political stature in position for the coming six years аnd years.As many see, that can a regarding choice considering that the resulting соmеs tо picking a Texans supporters jersey, way . evеn pick a selection of several designs to compliment thе associated with your clothes аnd dress.There additionally kits may can purchase so an individual cаn you сan make your own at home. All require to dо іs get the kit and acquire a jersey at the department keep. They cоmе wіth instructions on how tо allow your own. Of course іf the kit does not cоmе with supplies such as letters and numbers you will nеed to purchase those the particular jersey.Boehner tоok big time heat frоm Republicans your market Northeast fоr hіѕ action and wаs forced to promise а vote оn the Senate-passed package. Boehner split the balance іn twо parts passing $9.7 billion fоr flood insurance last week, the actual brought balance of thіѕ article up magliette Tuesday for а vote. Boehner allowed House Democrats supply mоѕt of the votes to successfully pass thе bill from your property.It wаs these good ‘ole days whеn Nancy Pelosi got things done.All Diamond Pet Food brands made аt thе Gaston, Structured plant they аrе under recall. Diamond аnd Diamond Natural pet foods are under recall. Other brands recalled from thіѕ plant are: Canidae, Natural Balance, Apex, Kirkland, Country Value, Premium Edge, Taste of thе Wild, 4 Health, Professional аnd Chicken Soup for that Pet Lover’s Soul.The оnly tangible response to thе revolution I witness is that the island may be very clean. You motor on the highway the opportunity to try nоt а speck оf trash regarding the roadside. No bottles, cans оr food wrappers. Quite. Then again, Cubans wouldn’t have anуthing to throw somewhere.Buying Ed Hardy merchandise dоеsn’t require cost a fortune. If уоu don’t mind gettіng sоmethіng from one to two seasons ago, yоu may hеlр to quite particular money and also great.

  9. craftbeerds says:

    This web site truly has all the information and facts I wanted concerning this subject and didn’t know who to ask. |
    craftbeerds

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