Minor CSS Update

Wed Jul 11 23:39:24 2007

I am now using three stylesheets. The first is a base sheet with the basic colors, font styles, and other stuff that comprises the essential "look" of the site. The other two then deal with specific positioning and formatting for screen and handheld media. Should look exactly the same, but this will make it easier to keep the look consistent between the regular version and the mobile version.

Definition of Irony

Sun Apr 29 04:54:30 2007

After posting a news item about my IE max-width-with-percentages hack, mysteriously the image at the top of the home page lost its max-width functionality. After struggling with the fact that it was the only page with this problem, I finally realized that the <pre> block I used to display the CSS code was causing the page to expand, so the picture had no reason to shrink based on the rules I set. Oh well, it will fix itself when that item is too old for the front page...

Button-Style Links

Tue Apr 24 18:55:07 2007

A friend of mine was asking how to have an html form button function as a regular link. The answer of course is to make a bogus form and set the action to the desired page, but the problem could more correctly be solved using CSS. The CSS I came up with is the following:

a.button
{
	text-decoration: none;
	color: black;
	background-color: #D6D6CE;
	border-style: solid;
	border-color: #FFFFFF #848484 #848484 #FFFFFF;
	border-width: 0.125em;
	padding: 0.125em 0.3125em 0.1875em 0.25em;
	position: relative;   /* friendly reminder to IE to render borders correctly */
}
a.button:hover
{
	cursor: default;
}
a.button:active
{
	border-color: #848484 #FFFFFF #FFFFFF #848484;
	padding: 0.1875em 0.25em 0.125em 0.3125em;
}

There are plenty of tutorials out there on how to achieve this effect, but I haven't seen any that use em's, move the text when activated, and block the cursor change. So, I like mine the best! I don't plan on using it anytime soon, but I figured this would be the most appropriate venue for sharing it.

max-width Updates

Tue Apr 10 16:03:36 2007

In my quest to allow large images to be resized to fit smaller screens, I managed to adapt the common IE CSS Expressions technique for emulating max-width behavior to work with percentages:

/* IE-only hack for (imperfectly) emulating max-width with a percentage */
width: expression(this.offsetWidth > parentNode.offsetWidth*0.91 ? parentNode.offsetWidth*0.89 + "px": true);
/* end IE hack */
max-width: 95%;

Please let me know any comments about or problems with this technique. I'm no expert in javascript, much less CSS Expressions, but this seems to behave almost as I would like in IE. I say "almost" because when making the window smaller it behaves as expected, but when making the window bigger the resized images stay small. I'm willing to live with this for now, even though it worsens performance in IE7 (which actually does support max-width).

There is still a bug with the image-resizing behavior in Safari, where the images look squished because the height isn't adjusted proportionally with the width. I scoured Google looking for a solution, but only found more people asking the same question, so I guess I'll have to live with this as well.

Absolute Positioning Addendum

Tue Apr 10 13:32:11 2007

While working on another web project that does use a footer, I realized that giving the content area a min-height would do the trick, if you know the height of the menu column. Of course IE6 and prior doesn't support min-height, so I found this hack that makes IE6 work, doesn't break IE7, and seems to validate. Awesome!

Layout Converted to Absolute Positioning

Thu Apr 5 14:01:50 2007

Most CSS nerds would agree that there are two schools of thought when it comes to liquid layouts: floats and positioning (tables are out of the question these days). I have been using the float method ever since I originally ditched the tables, but there have been problems with it:

1. The gallery pages use a clearing trick for that layout that I haven't been able to get away from, so whenever the leftside menu extends past the first row of pictures, there is some blank space before the second row.
2. In IE, if something to the right of the menu was too wide and horizontal scrolling was necessary (a title picture or long heading like "Rasterbations", combined with low screen resolution), the wide content is strangely moved below the floated menu. There is still horizontal scrolling necessary, but now there is a big blank space next to the menu.

The only real disadvantage I could find to the positioning method is that it is difficult to have a footer if you don't know which column will be the tallest. Since I don't use a footer anyway, this is not a problem.

Feel free to let me know if there are any problems with the new layout. It should look exactly the same as before, minus some odd blank spaces.

External Link Icons Added

Mon Mar 19 02:43:09 2007

For those of you using a browser that supports CSS3 selectors, I have added the Wikipedia-like external link icons to any link with an absolute URL attached to it. Sexy!

Much gratitude to this blog for the details on this trick.

Galleries converted to XML

Sun Mar 18 22:01:49 2007

I spent some time converting all the picture gallery data to an XML format today, instead of the awful unstructured format I had it in before. This change mainly makes it easier for me to quickly make galleries and get more pictures up on the site.

In addition, since each picture now has the notion of a title, that is what is displayed on the individual picture pages, rather than the filename.

Resizable Pictures

Tue Feb 27 17:26:03 2007

I added a small feature that re-scales a picture (on its individual view page) if your browser window is not big enough to see all of it. Then, with the help of a small javascript function, you can double click the smaller picture to see the full-size version right there on the page (although you will probably have to horizontal scroll to see the whole thing). The pictures on this site are a size that is conducive to viewing on a common size screen, but you can resize your window to try out the new feature because it is just that cool!

Worth noting is that this feature uses the CSS max-width property, so users of IE 6 and below won't be able to use this feature.

Another update to the galleries!

Thu Feb 15 15:13:21 2007

Each picture now has its own page, an improvement over the previous system of linking directly to the pictures from the gallery pages. This makes the galleries pretty much complete.

Thumbnails Created

Thu Feb 15 03:28:50 2007

I finally added a feature to automatically create thumbnails for all the pictures in the galleries (for those who didn't notice, previously the gallery pages just loaded the full-size pictures and let the browser resize them). This will make for much faster downloads of the galleries, which is always a good thing.

Site converted to CSS formatting

Tue Feb 13 15:25:58 2007

I just finished up integrating CSS into the site, replacing the awful on-the-fly random formatting I was using before. Visible changes are minor and mostly unnoticable, although changes to the pictures section are a little more noticable for anyone who visits often. The CSS makes the formatting more uniform and makes the site in general less of a pain to update and maintain.

Since I had to go and make some small changes to every page, there's a remote chance that something got screwed up in the process. If you find something that's not quite right, please let me know.

News Management Software Completed

Wed Mar 1 19:33:25 2006

If you're reading this, you've stumbled upon the results of my newly-completed news software! It's built on XML, and everyone knows that everything XML is cool, so of course I'm very excited about it.