bioneural.net

The "new look" bioneural.blog for December 2004 is here—and soon other content under the bioneural.net umbrella will get the same treatment. But first there is some debugging to do. Built on a Mac using BBEdit and the (apparently standards-compliant) default OS X browser, when viewed using Safari most of the issues are relatively minor. Internet Explorer and Firefox don't play nice, however.

This article refers to iBlog (version 1.x), a Mac blogging client that was formerly used to publish this site. It may refer to design elements and other features that have since been replaced.

Design inspiration

The Doctor in Star Trek Voyager once said, "I'm a doctor, Mister Neelix; not a decorator":

The Doctor [Need QuickTime?]

With the words of my holographic colleague in mind, I needed help to break free from the basic stylesheets and templates included with iBlog version 1.4.1. I had already made some CSS tweaks and customized an iBlog Template Set to create a three-column layout for the main blog page, but the result was never satisfying.

I had previously used Dan Cederholm's CSS navigation tabs and was very happy with the cross-platform utility they afforded. Dan's SimpleBits website is in my opinion one of the most attractive designs of any site I've come across. It's not the least bit fussy, with clean, elegant lines that somehow take the traditional "header-2 column-footer" blog design to new heights. Dan is the author of Web Standards Solutions: The Markup and Style Handbook:

Get it! (Amazon.co.uk)

Dan provides more information about the book together with a sample chapter here. The sample chapter covers two-column layouts using CSS and proved very helpful in the redesign of this site, describing the "sliding faux columns" method of ensuring that the sidebar matches the main column in length (see also here). SimpleBits and Dan's CSS genius were unashamedly the inspiration behind my customised Template Set for publishing content with iBlog.

Safari on Mac OS X Panther

For reference, here's what the header of the new design should look like, as rendered by Safari v1.2.4:

The footer should be a matching grey (#666666) with a subtle shade at the top:

The CSS for this is here (5 KB .zip archive).

Internet Explorer 6 on Windows XP

There were six main issues when viewed with Internet Explorer 6 on Windows. Firstly, there was a step in the horizontal shading below the browser menu and sub-navigation menu. Secondly, the buttons and search box in the navigation menu didn't show at all:

Solution (issue 1): After much experimentation, the fix involved creating div class="shade" within div id="wrap", and using the style .shade {background: #fff url(http://www.bioneural.net/images/shade_horiz.jpg) repeat-x top left;} . At last, no stepping, and a uniform result in all three browsers! Almost a shame I decided to ditch some of the shading...

Solution (issue 2): It turns out that the location of p id="buttons" is pretty vital as far as IE6/Win is concerned; I had moved it inside the sub-menu div but it correctly sits within div id="wrap".

Thirdly, the background image ran through the footer, with no background colour or horizontal shading to be seen:

Solution (issue 3): As an initial work-around, left-aligning the text in the footer avoided it crossing the background image's dividing shade. However, persistence in bug hunting revealed that it wasn't the dreaded IE "float" bug that was causing my footer not to show with a background in IE6/Win. For some mad reason IE refused to show the background unless I applied a top border to my footer: #footer{border-top: 1px solid #000;}.

Fourth, when the widescreen stylesheet was applied (http://www.bioneural.net/css/2005a/wide.css), IE6 put a dent in the sidebar shading (just below the end of the content) and screwed up the right margin (see side of the header elements):

Solution (issue 4): I traced the source of this bug to the line #subnav { width: 100%; } in wide.css. If width was set to less than 70% IE6 rendered the sidebar correctly (although the subnav menu didn't extend across the screen). 70% is also #main-body {width: 70%; }—coincidence? Sounded suspicious so I changed #main-body {width: 70%; } to #main-body {width: 69%; }—problem solved and I get to keep the 100%-width sub-navigation menu!

Fifth, I wanted to have unvisited links with a solid underline; visited links with a dotted underline—a:visited {color: #663399; text-decoration: none; border-bottom: 1px dotted #036;}—and images that were also links with no underline at all. Sounded simple. IE6, however, insisted on a dotted underline for any images (such as the style-switcher buttons).

Solution (issue 5): I couldn't solve this one, so did away with the 1px dotted decoration. Shame; it looks great in Safari (more of a dash in IE anyway).

Finally, I thought it would be nice to include an inline favicon.ico when quoting from another site. Safari and Firefox handled this:

... but IE6 did not (I'd always thought the .ico format was Windows-derived):

Solution (issue 6): I decided not worry about this. It is only IE we're talking about ;-)

Firefox 1.0 on Mac OS X Panther and Windows XP

The main issue here was that the buttons in the sub-navigation menu collided with the search box (to a differing degree on Mac vs. Win):

Solution: I used absolute positioning to make a bigger gap between elements; the gap isn't the same in each browser, but it still looks better.

When I replaced the shade under the sub-navigation menu with a styled bottom border (border-bottom: 1px solid #ccc;) this failed to extend the width of the menu (as it did in Safari and IE6). Not much of an issue in the fixed-width view (photo at top of sidebar), it looked a bit "unfinished" in the widescreen view (no photo at top of sidebar):

Solution: The fix was #sidebar {margin-top: 1px;} /*Fix for Firefox to show subnav border-bottom*/.

A further, relatively minor irritation, was that Safari and IE6 placed a space between the "read more" link and the divder:

... whereas firefox did not:

Solution: Previously within another div, I created div class="readmore" to contain the "more?" link and arrow graphic, styled with .readmore {text-align: right; padding: 0 0 5px 0;}.

Unexpected problems with PNG

The bioneural.blog banner image occupied 44 KB as a PNG graphic. Re-saved a a "JPEG High" graphic, it became only 12 KB. It looks like there's a good reason that they say PNG is not suited to photographic images!

The main problem, however, concerned the appearance of PNG images (created in Adobe ImageReady 7.0) rendered in Firefox and IE6. For example, despite colour matching the grey of the PNG to the footer background (#666666), Firefox clearly demarcated the two:

Solution: This particular "shade" problem was fixed by reverting to a transparent GIF image. A similar demarcation issue with the banner image, centred on a colour-matched background into which it should "dissolve", was solved by reverting to the JPG format. This issue was also evident using IE6:

Persisting issues with iBlog

iBlog has lots of "issues", but then it is a version 1.x application and is commendable for its flexibility (when used with a certain amount of knowledge). There are a few issues in particular that persist into this redesign and continue to plague me.

• While my Template Set per see may validate as XHTML, the Abstract and Body content handled by iBlog does not, generating multiple "document type does not allow element div here" errors. Getting rid of extraneous font styling is strangely on the iBlog feature requests list rather than bug list—as is "valid XHTML"!
• Some dates are missing/ inconsistent as listed in the category pages.
• Links may have an extra following space (this is inconsistent e.g. not in pages generated from ArchivePage.txt and YearPage.txt in the Template Set).
• The date of publishing is not displayed in ArchivePage.txt, YearPage.txt, or DayPage.txt (although this can be turned off in Navigation Editor to hide the non-functional code).
• EntryPage.txt from wrong Template Set is selected (when correctly set in iBlog Prefs) if more than one blog is being published (Workaround: set the Template Set of all blogs to the same as the one you want to publish, then publish only that blog. Do this for each blog.
• The RSS feed generated by iBlog doesn't seem to be compatible with Mozilla Thunderbird 1.0.