The Prototype is Finished! I really mean it this time!
Permalink | Tweet This! | | November 25, 2007 by John in JB.com, Web Design
(Update: looks like ass in Internet Explorer 6. See below.)
Today I put the finishing touches on the prototype for my new blog design.
I was having trouble getting it to look right at 800×600 resolution, letting the layout degrade gracefully to the narrower width. The layout was based on a width of 850. The long term solution is to completely overhaul the layout, which I will do someday. For the short term, I chopped 90 pixels out of the width, a little from the racing stripes (sidebar 210px), a little from the perforated metal (Page navigation 150px) but most from the main content column (400px).
It took a fair bit of fiddling around to get the slideshow to look the way I wanted, that is, sit “behind” the top edge of the main content column. The creator of Monoslideshow was very helpful in getting it working and looking right. Right now I’m using my photos from my ‘07 British Columbia trip, from my ride on the Kootenay Bay Ferry. When my bike makeover is done I’ll swap out the BC pictures for fresh bike pictures. Eventually I’d like to use Flickr to manage the photoset since I’m not really doing anything else with my Flickr account; monoslideshow is supposed to have that functionality but I couldn’t get it to work. Something else to troubleshoot, I suppose.
All that remains is to chop it up and make a WordPress theme out of it.
Internet Explorer 6
Okay, I fixed the layout in IE6. I put the IE6-specific changes in a separate stylesheet with conditional comments in the main file. I replaced the maincap graphic (it overlaps the bottom of the slideshow), eliminating the softer drop shadows that overlay the slides and replaced the bulldog with a traditional GIF, since none of the published hacks worked for displaying PNG-24 transparency properly. Probably has to do with the fact that the images are placed in the background of div elements, not as inline images. I also hid the number plate graphic that is located at the bottom of the sidebar; IE6 users just don’t get to see that bit of fluff. I also made the navigation buttons aliased (read: jaggy edges) but I don’t like that solution so it’s back to the drawing board …some other day. The layout breaks down but is readable in Internet Explorer 5.5, gets progressively worse in IE5, and blows up real good in IE4. I don’t really care about anything older than IE6, but I was curious. There are still a couple of weird text formatting issues. Apparently after a blockquote tag, the following paragraphs don’t want to behave with regards to their margins.
All in all I’m pleased with the IE6 fixes.
Leave a Reply
You must be logged in to post a comment.