Heaven forbid that Microsoft (hereafter Microsloth for reasons that will become apparent) should provide a Web browser that actually does what it's told.
My primary browser is Mozilla Firefox. It's small, it's fast, and best of all, it's compliant. If you write HTML according to spec (as I try to), it doesn't break it. As annoying as HTML purism can be to some designers, the fact is that it's one of the easiest ways to ensure that if a Web browser can't handle your design, at least it will probably devolve gracefully.
My other blog, Sacra Eloquia, consists mainly of lengthy theological posts. They are originally adapted from Sunday school lessons that took around 45 minutes to deliver, so they're pretty lengthy. That means lots of scrolling. More advanced blogging platforms than Blogger often offer excerpting: a post preview on the main page and a link to the full article. That kind of feature is perfect for what I'm doing on Sacra Eloquia. And while it's not built into Blogger, it can be hacked, and in fact they do provide instructions. Following those, basically, I followed their directions, like so:
Within the header of my template (i.e. between the <head> and </head> tags), I added this bit of style information:
<style>
<!--
<MainOrArchivePage>
div.fulltext { display: none; }
</MainOrArchivePage>
-->
</style>
Next, I located the <$BlogItemBody$> tag in the template, and immediately after it, added:
<MainOrArchivePage>
<p>[<a href="<$BlogItemPermalinkURL$>">Read more</a>]</p>
</MainOrArchivePage>
Basically, what all this means is that when you write a blog entry, enclose the part you don't want on your main page in <div class="fulltext"> and </div> tags. On the main page only , it will be hidden; also on the main page it will provide an explicit link to the full text at the bottom of the excerpt.
The disadvantage (which the Blogger people admit) is that the read-on link will always be visible on your main page whether you excerpt or not. No matter, I just made some modifications to their hack. In the style sheet, I added:
div.readmore { display: none; }
div.fulltext + div.readmore { display: block }
and wrapped the read-on link in <div class="readmore"> and </div> tags. Basically, what this does is make hiding the read-more link the default condition. However, if the last part of the blog post is hidden, then the link is visible. So in a standards-compliant browser like Firefox, it works as expected.
Enter Microsloth Internet Explorer.
I don't use it for regular browsing. In fact the only reason I keep it around is a) because it's too much hassle to extricate it from the operating system; and b) so many people are using it, that I have to design Web pages that don't break in it. It just happens that I looked at my blog in IE this evening, and much to my chagrin discovered that the read-more link doesn't show up. At all. It appears that IE doesnt' like adjacent selectors, so it ignores 'em.
No matter, I thought. If I can't work around this "feature," I'll just exploit it, adding this to my style sheet:
div.iereadmore { display: block }
div.readmore + div.iereadmore
And I added a second link, identical to the first, only this time wrapped in <div> tags of the iereadmore class. Essentially, Firefox now hides one and displays the other, and IE does the exact opposite.
The only problem remaining: We're back to square one as far as the original Blogger hack is concerned. Whether I excerpt the post or not, IE will always display the link. But at least the hack works properly now on one browser and it isn't exactly broken with respect to Microsloth anymore. Maybe I'll edit one to flash IE users a snarky message, as a reminder that Microsloth can't be bothered to provide a browser that respects Web designers or users.
Meanwhile, feel free to inspect my HTML source, and if you can suggest another workaround that will get both Mozilla and IE working identically, I'd love to hear about it.
Posts
No comments:
Post a Comment