A commentary on iron Sportsters
Blog BOM Custom Design
Garage OSARM Repair Smörg

Cleaning up Repair and Customization

I slapped some content in the Repair and Customization sections from the older version of the site. Now I have redesigned the layout so it displays and prints better.

By SportsterPaul on June 24, 2013 2:17 AM

I wanted these sections to be "liquid," so the content would fill the width of whatever browser you use it on. I also wanted the pages to print with some decency. I gave up on making pages that worked in Internet Explorer or Chrome or the Android browsers. I just want things to look good in Firefox.

The first problem is that Firefox will cut both <div> and <table> elements in half when it renders printed pages. What it will not cut in half is images. So I made a table with two cells. The left cell has an image one pixel wide and 450 pixels long. The other cell holds the picture and the caption. The picture sets the width of the table. So each picture in the Repair proceure is in its own little table that Firefox will not cut in half when it prints. Then I float all the tables "left" in the style-sheet. Lets say there are 12 pictures in the article. If you have some giant browser window 4000 pixels wide, or zoom way out in Firefox, all 12 of them will fit in a single row. As you narrow the window, the rightmost tables will pop under the top row. When you narrow the browser window like on a phone, it will arrange the tables 1 wide by 12 rows. They hop around for sizes in between. I already made the header section of the pages liquid, so this schemes dovetails with that nicely.

I wanted the page to have a clear start, so I made a new table for the very top that would hold the title, the deck (subtitle) and a key picture. I made it twice as wide as the picture tables, but liquid so it will narrow down to one narrow column if need be. Lots of fiddling with the Movable Type templates, the page entry HTML (using Komposer pasted into the Entry post) and the style sheets (using the fantastic Stylizer). One key thing was having a second stylesheet for print. That way I can suppress the search bar and contents and the pdf link in the printed page. To make the pdf file, I just do a print out of Firefox to a pdf writer, Cute Writer in this case.

A lot more suffering to get the category pages and top-level index page right-- and I gave up on those printing right, but it can be done. I prefer to get more content up. This scheme requires that the written parts don't force the table to blow out longer than the 450 pixels set by that 1-pixel image in the left cell. Another example of why you can't separate "content" from "presentation" like all the web idiots like to profess.

You can grab the HTML and CSS from the pages, so now I will just outline my personal procedure for making a page. No need to read the following, it is just to jog my memory in a year.

This post is in these categories:

border bar
Bottom of first column This is the end.