Back online

Posted by Kenny on September 22, 2007

We’re finally back after some extended downtime. Obviously I don’t get around to updating the site very often, so I’m sure it comes as no surprise that I didn’t notice the problem right away. A big thanks to Jeffrey who emailed to inform me that ScribbishWP was unavailable. All of the static content on the site was accessible, but all of the WordPress-powered pages were down. It took technical support a week to track down and fix the problem, but as of last night everything seems to be working again.

So if you’ve been having trouble accessing ScribbishWP, give it another try now. And stay tuned for a long-overdue update in the near future (I’m putting that in writing in the hopes that it will motivate me to finally wrap this up).

Upgrade to WordPress 2.0

Posted by Kenny on November 29, 2006

I finally upgraded the blog to run on WordPress 2.0. I’ve been holding off on this for awhile because I just haven’t had the time to deal with it. I’m happy to report, though, that the upgrade went just as smoothly as the WordPress documentation claims.

After backing up the database and files from the previous blog installation, I downloaded the ZIP file for WordPress 2.0.5, extracted the files to my local disk, and uploaded them to my host server with FileZilla. I then entered the URL of the upgrade script into the browser, clicked the Upgrade link, and voila!

Now why can’t all software upgrades go this smoothly?

IE7 and the ScribbishWP sidebar

Posted by Kenny on October 20, 2006

After a lengthy beta cycle, Internet Explorer 7 has finally been released. Microsoft claims that IE7 has significantly better CSS compatibility than previous releases, so how does that impact the sidebar “bug” in ScribbishWP? You’ll be happy to know that IE7 does in fact fix the overflow problem that caused the sidebar to shift to the bottom of the page. Unfortunately, IE7 still puts the scrollbars inside the existing content space, but it’s a whole lot better than having to play games with specific elements in your content to prevent IE from barfing.

On a related note: Jeffrey Hardy, the creator of the original Scribbish theme, recently introduced an updated style targeted at a minimum display resolution of 1024×768 (see I no longer care about 800×600). Requiring a higher screen resolution allows a wider area for content, which reduces the likelyhood of hitting the overflow issue in the first place. Hopefully I’ll have some time soon to add the wider style as an option in ScribbishWP.

ScribbishWP sidebar bug in IE 1

Posted by Kenny on July 18, 2006

Some ScribbishWP users have reported problems with the sidebar in Internet Explorer. When the site is viewed in other browsers such as Firefox or Safari everything looks fine, but in IE the sidebar disappears to the bottom of the page below the content. The problem doesn’t occur on all ScribbishWP sites, so what causes the problem and what can you do about it?

The Problem

Surprise, surprise! The problem is actually a bug in the way Internet Explorer implements CSS. It is sometimes referred to as the “Expanding Box” problem, and it is triggered when one of the elements in the content area or the sidebar exceeds the column width defined in the stylesheet, You can get all the gory details of the bug at Position is Everything. Internet Explorer 6.0 made a number of improvements in the handling of the CSS box model, but this particular bug still persists.

In ScribbishWP, the content area and sidebar are assigned fixed widths in the stylesheet. This is partly for stylistic reasons and partly due to technical constraints of the current CSS standards. The positioning of the content area and sidebar into side-by-side columns depends on these fixed widths.

When Internet Explorer expands the width of one of these columns, the columns will no longer fit side-by-side so the sidebar gets pushed down below the content area. This happens most often with images and <pre> blocks, but it’s possible in other cases also. Firefox and Safari, on the other hand, will limit the displayed width of the contained elements, and add a horizontal scrollbar below the element if necessary to allow the remainder of the element to be viewed.

The Workarounds

Yes, I said workarounds and not solutions. There are a variety of CSS hiding techniques and other browser-compatibility tricks, and some may wonder why I don’t use those to “fix” the problem in ScribbishWP. There are several modifications that can be made to the CSS styling to prevent the sidebar from shifting to the bottom, but they all involve tradeoffs, so I’m leaving it up to individual authors to decide what is best for their site.

Here are several options that you might try if you want to avoid the problem on your site.

Adjust Your Content

Adjusting your content to fit within the size limits of the theme is really the only way to ensure that all visitors to your site receive basically the same experience. ScribbishWP defines a content area width of 500px and a sidebar width of 200px. If you can keep your content within these limits then you won’t have a problem.

You should always scale your images appropriately for the available space. <pre> blocks can be a little trickier because adjusting the formatting to make it narrower may affect the meaning. It is also impossible to control the exact size of the fonts on different systems, so leave a little breathing room if you can.

Adjust the Column Widths

If you can’t quite fit your content to the default column widths, you might want to adjust the widths. The column widths in ScribbishWP are controlled by three elements in the style.css file: #content, #sidebar, and #container. #content and #sidebar should be self-explanatory. The width of #container is the total width of #content and #sidebar, plus an extra 40px for the border between the two columns. For the default widths, this is 500px + 200px + 40px = 740px.

Just be aware that the default widths in ScribbishWP are already hitting close to the limit of what can be viewed on an 800×600 screen without horizontal scrolling. If you increase the widths by much then users may need higher resolution displays to view your site properly.

Set Fixed Element Widths

Internet Explorer won’t honor the fixed widths of the containing column elements, but it will honor a specific width assigned to the element itself. Assigning a specific width to an element will force IE to display scrollbars for the element if it exceeds the specified width.

Unfortunately, IE doesn’t take quite the same approach as the other browsers when adding the scrollbars. Internet Explorer covers up part of the content by adding the scrollbars inside the current display area of the element instead of increasing the display height and adding the horizontal scrollbar below the element like Firefox and Safari. You may need to make extra room in the block by adding an empty line or two at the bottom, especially for single-line blocks, but that empty line will be seen as extra blank space in all other browsers.

You’ll need to consider lots of variables when determining the correct width for a particular element. For example, the <pre> element in ScribbishWP uses 10px of padding, so the element width needs to be set to 490px instead of 500px. There is actually another 10px of padding on the right side, but it is not part of the visible portion of the element when the element is truncated so it isn’t included in the calculation. If an element is nested inside a list then you’ll need to reduce the width even further to account for the bullet margin.

Enable Line Breaking

You can force IE to add line breaks to normally “unbreakable” text by adding the following IE-specific CSS attribute:

  word-wrap: break-word;

This will, of course, mess up the careful formatting of your text without even giving you the control that you would have had by adjusting the content yourself. Non-IE browsers will ignore this non-standard attribute, though, so it should only affect the rendering on IE.

Hide the Overflow

You can ensure that your beautiful layout will never be compromised by telling IE to hide any content that overflows the boundaries of the content area. On the #content element in style.css, add the following CSS attribute:

  overflow: hidden;

This will cause IE to simply chop off any content that doesn’t fit within the column. The drawback is that IE won’t add any scrollbars or anything, The content is just gone, so the IE user will never see it. Firefox and Safari still seem to display correctly because the element widths have already been adjusted before determining if there is any overflow.

Scribbish theme for WordPress 4

Posted by Kenny on June 15, 2006

Those who have visited this blog before will probably notice a change in appearance. I never cared much for the default WordPress theme, but I browsed through who knows how many alternate themes in the theme gallery and still didn’t find anything to my liking.

Then I decided to check out Ruby on Rails a couple of months ago, so I set up a test blog using Typo because it is one of the best open source examples of a complete Rails application. From there I discovered Packagethief’s Quoted-Printable blog and the Scribbish theme. Here’s a snippet that I posted to my test blog at the time:

I’ve always preferred page designs that are simple and clean, lightweight to load, and yet still pleasing to the eye. Scribbish fits those criteria perfectly. I just wish there was a WordPress-compatible version that I could use on my public blog!

I recently had a little time to kill, so I set out to create the WordPress version myself and ScribbishWP was born. If you’re a WordPress user in search of an awesome theme then check it out, and give a shout out to Packagethief for a great visual design.