What the — ?

Problem: I want the navigation bar across the top of my site to look like tabs, with the currently selected tab in front. This was easy to acheive in Firefox, but IE was a little pesky. For some reason, it was rendering the colors all wrong.

p{text-align:center}. !{border: 1px #ccf solid; margin-right: 15px;} /images/colors-right-ff.png 165×90 (Correct colors rendered in Firefox.)! !{border: 1px #ccf solid;} /images/colors-wrong-ie.png 165×90 (Incorrect colors rendered in Internet Explorer.)!

As it turns out, IE displays PNG images slightly darker than it should (notice my header image is a little darker, too). I explicitly used #003366 in Photoshop when creating the background image, and the background color for the selected tab is also set to #003366 in my CSS file. IE curiously renders the background image as #00295a.

Solution: a quick and dirty fix — save the background as a GIF instead of a PNG. I much rather prefer the PNG format, so if anyone knows of a solution to this odd rendering issue, do tell.

Transparent Backgrounds

==

It’s Magic!

==

I’ve written before about alpha transparency in PNG images. I’ve always wanted to use the effect to give a semi-transparent background to divs on my site. Unfortunately, since IE can’t render PNGs properly, the appearance of the site would break for 90% of all Internet users.

I’ve been designing a new site for the Crimson Nights events that UPC sponsors, and I really wanted “cool factor”. So I went snooping and found this. It’s a blog entry that describes a proprietary technique to load a PNG with full alpha-transparency in IE. It looks like this:

Continue reading

Night of the Image Map

A List Apart released a new article this week by author Stuart Robertson. The article details an intriguing new form of the old-fashioned image map. He throws the image up as a background and then uses CSS to position the links over the top. Pretty clever, eh?

However, what I think is even more clever is the site he designed using the technique: Blambot’s Dead Ends. It’s a choose your own adventure book! I used to love those when I was a kid. I haven’t had a chance to read much of this one, but the site looks incredible. Who would’ve thought you could build a great looking page like this using standards compliant methods?

A List Apart Returns

If you’re in to web design, but have never read any articles over at A List Apart, I highly recommend that you scoot your butt over there and start readin’.

The site has been under construction for over a month and I’ve really missed reading fresh content there. Now that their new layout is up, they have satisfied my cravings with three new articles. I especially enjoyed the sliding doors article.

I’ve been thinking a lot lately about trying my hand at freelance web design. I think I would have to learn flash first, but some things I’ve read lately have convinced me that the world of freelance design may not be as hard to break into as I had previously thought. I’m not sure I could do it for a living, but I already spend way too much time working on my own site. Why not make a little side money doing something I enjoy?

More About Wikis

SitePoint ran an article today that mentions wikis. The article is about hypertext — what it is, why it was invented, and how understanding it can help you make better webpages.

Here’s the article: “Caffeinate Your Hypertext“.

The article explains (very matter-of-factly) that hypertext and HTML aren’t the same thing. Hypertext is simply a text document that is — as the article puts it — caffeinated. HTML, on the other hand, is a standardized language used in creating hypertext.

I rather enjoyed reading the article, since it introduces several sites that are using hypertext in new and innovative ways. It lists the WikiWikiWeb among many others.

Relative Links for Dummies

I’m feeling extremely stupid right about now. Here I am coding away in strict XHTML, and I just learned how relative links work. :O

Now, I sortof understood how relative links worked before, but I never used them because I never saw the usefulness of them. Relative links are meant to make it easier to move things around, but I always thought people who said that were smoking crack. If you move a page up or down a directory, all your relative links are broken! Consequently, I always preferred using static links for all of my content, like this:

bc. Avatar

However, I just learned that the following relative link does the exact same thing no matter what level the current page is in the heirarchy:

bc. Avatar

What I never knew is that there is a pretty clear distinction between a relative link that starts with a forward slash and one that doesn’t. The starting forward slash tells the browser to start at the root of the site. I can’t believe I never caught onto this before. Sheesh. :eek:

Can You Say, “Wow”?

I found a great page that highlights the raw power of CSS. It’s called the CSS Zen Garden. At first glance, the site may seem a little pointless. It only has one page, and the few links that exist on the page all seem to point to other sites. I was tempted to leave the page a few seconds after I landed on it…

But then I noticed the menu down the side listing a bunch of stylesheets and their respective authors. Clicking on any style refreshes and applies the chosen stylesheet to the page. You can’t really understand what I’m talking about unless you have a look for yourself, but in most instances, the stylesheet radically alters the layout of the page.

Anyone who knows CSS and has graphic design experience is encouraged to submit a CSS file, but no one is allowed to alter the original HTML file. Viewing the source of this site really gave me a sense for how to code an HTML file for maximum flexibility and how powerful CSS can be in terms of layout and style.

Down With Internet Explorer

I don’t know if it’s because I’ve been using Mozilla Firebird for the past month, or because I’ve been redesigning my site to be standards compliant, or if it’s some of the things I’ve read lately on SitePoint and A List Apart. It’s probably a combination of all three. At any rate, I don’t like Internet Explorer anymore — not one bit.

Continue reading