Wednesday, April 05, 2006

More IE and CSS suffering

I was working on the style sheet for my "Blog of the Dead" during lunch and thought it would be cool to add an "icon" to a post title for each individual profile writing for the blog. I modified the style for the h3 post-title element to include a background image then tested it. It worked like a champ in Opera. I uploaded the image to my free web host and I ran into a problem.

The free host I picked to serve style sheets and documents and stuff prohibits hotlinks to images (to stop bandwidth abuse, everyone browsing your web page must turn off their firewall – yeah, pretty dumb; heck the style sheet is larger than the image icon). I tried uploading to Blogger but they convert images to JPEG (killing the GIF transparency). I ended up using ImageShack to host the image.

As I was fighting with this dumb little image, I thought it would be better to wrap the h3 element with a classed div element. It still looked good. Everything was looking good until I tested it in IE.

When the page renders in IE 6 SP2 the image shows up but the h2 element above it disappears. WTF? A Google search pulled back thousands of hits on IE CSS flaws and hacks and crap but I couldn't find a direct solution to the problem.

My lunch break is over, my beans and chili are cold, and I'm faced with the options of

  1. place an img tag inside the header
  2. say "F***" IE and blind 60-80 percent of my potential readership
  3. scrap the post icon idea

Well, f***.

No comments: