Fifer’s Web site — on the Web since 1995!

CSS Graphic Picture Frame

This demonstrates a couple of ways to make reusable picture or photo frames using css. It also demonstrates how to constrain frames in an expandable or contractable table to change width on a page, or how to make each frame a fixed width that will wrap depending on the page width. No javascript or plug-ins required - just standard html, css style sheets, and maybe server-side includes (SSI) if you want to keep it clean and reusable.

Text Drop Shadows in CSS

This is one way to make drop shadows using css. It's not pretty, but until all browsers support a cleaner version, this seems to work. Do a “view source” to see the guts of how it works.

Transparent Layers and Window Panes

I figured I should start populating this area (finally). So why not start “How’d you do that?” with some info about how I made “floating” transparent window-panes on my web site.

Disclaimer: Just because I say it can’t be done doesn’t mean that’s a fact. I’ve tried figuring out ways to do these things, and as of the posting of this article, everything here is to the best of my knowledge and findings. Use it as advice from a friend who learned how to do some neat stuff, and is passing it on to you.

Pros: This isn’t too hard to do, and it’s done using CSS style sheets.

Cons: It doesn’t seem to work right on Internet Explorer.

First, let me say I don’t normally post people’s email questions on my site, but he wanted an answer, and didn’t provide an email address that worked. (It got bounced back). So make sure your email is right when you fill out the email form!

I haven’t come across any new info, but I haven’t looked lately, either. But I know IE hasn’t done anything to improve its style-sheet handling, so I doubt it. As a professional web-designer, IE is my bane. And IE for Mac? It’s a lost cause, so I don’t even bother checking on that one anymore. Anybody who still uses it, is probably used to things not working right.

My Web site has been tested on the latest (windows) Mozilla, Firefox, Netscape, and Opera browsers, and on the latest (mac) Safari, Mozilla, Firefox, and Opera browsers. (Opera is assuming the “identity” is set to something other than IE6). I don’t know if it would work with the IE6 profile, but if it gives the identity of IE6, my Web-page is programmed to give you the “plain” style-sheet instead, just to avoid all the difficulties.

To make your page use a different style-sheet just for the IE people:

	<!--#if expr="${HTTP_USER_AGENT} = /MSIE/" -->
	<link href="/css/ie.css" rel="stylesheet" type="text/css">
	<!--#else -->
	<link href="/css/fifer.css" rel="stylesheet" type="text/css">
	<!--#endif -->

That’s using Apache. I don’t know if that expression would work on other servers or not.

Some suggestions I haven’t tried (that you might fiddle with): hacking the stylesheet to use javascript client width/height or scroll-heights to find the window size, so you can give it definite coordinates. However, this still doesn’t fix the fact that it will still scroll whether you tell it to or not.

Like “max-height” and “max-width” IE doesn’t have a “fixed” property for pictures that aren’t the background. It’s like the old Saturday Night Live skit about the phone company: “We’re Microsoft. We don’t have to care.” ;-P