Archive for February, 2010

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 SiteNo Comments »

Happy Again

It seems that I have finally got my site and theme back the way I like it. In fact, it is a little bit better in some ways. And I pass XHTML Strict validation again. That always makes me feel awesome.

I am a happy dinane.

February 10th, 2010 • 9:57 am • dinane • Posted in SiteNo Comments »

Well, This is Something, Anyway

After much trial, tribulation, and annoyance, my site is more or less readable again. Woo hoo! But I’m having issues with comments. Boo hoo… For some reason I can’t comment. If you can comment, do it! But you probably can’t. It probably won’t work. Unless you’re a spammer… for some reason that is working… they must script their comments or something, I don’t know. Spam Karma is picking them up just fine. But any comment I try to make goes nowhere.

Anyway! At least we can all read old nonsense I wrote once. And my pictures are where they belong. And I’m typing this, aren’t I? And actually, some parts of my theme are better than they were before… But still, what a giant pain in the ass.

February 9th, 2010 • 3:59 pm • dinane • Posted in Site8 Comments »

What’s With the Mess?

I was hacked! Oh no!

I’m in the process of putting everything back together, but in my haste, I did not backup my style theme, which I couldn’t have restored anyway, as the PHP may have been damaged. But it would have been nice to have it for reference… As I put things back together, this will start looking more like you remember. But for now, we’re stuck with a bunch of seriously crazy divs that don’t get along.

But at least the data is still here. I love my data.

February 8th, 2010 • 4:06 pm • dinane • Posted in SiteNo Comments »
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