As you can already tell, I put my new design online today. I’m still in the process of tweaking a few minor things so bear with me. This site is definitely a work in progress, but I believe this is a step in the right direction. Please leave some feedback and tell me what you think. If you have ideas for improving the site or things you would like to see happen, let me know those as well. I’m eagerly waiting for your comments. The rest of this post will deal with some problems I ran into with the design and how I overcame them.
The first problem that I ran into was with the header image. Because I try to do my best to adhere to web accessibility standards, I needed to find a way to hide both the text title and description. Referencing CSS Mastery by Andy Budd, I initially tried some of the different image replacement methods mentioned in the book. While I commend everyone who was part of this book, I couldn’t find an acceptable method that didn’t involve either some CSS slight of hand or adding nonsemantic markup. In some way or another, the text was still using space in the header div. This was causing the surrounding images that form the layout to be completely out of whack. So my dilemma was that I needed to remove the text from the flow of the document, without hiding it, but still make it visible to screen readers.
Then it came to me; if an element is given the absolute positioning, it is removed from the document flow. While that fixed my layout problem, I was still left with the visible text. This led me to use part of a different method mentioned in the book: the text-indent property. Giving both items an indent of -5000px, effectively moves them out of the visible area, but upon checking with the Fangs extension in Firefox, both elements were still visible to it. Mission accomplished! I can’t imagine that I’m the first person to think of this, but I’m going to send it off to Mr. Budd, and various designers to see what they think. With any luck, I will have come up with a new image replacement method that is the best of both worlds.
> UPDATE: After thinking about the paragraph above, it really isn’t an image replacement technique in the sense the other replacement techniques are thought of. Oh well, still did what I needed it to.
As much as I hated to, I ended up having to use a hack on this one. I had absolutely positioned my feed icon so that I could overlay on top of a h2 block. Of course this worked great in Firefox and all other CSS advanced browsers, but then I looked at it in IE and my icon was all alone out in the white space. While it didn’t look bad, I knew it wasn’t right either.
At first I started by feeding the IE beast and the other, nicer browsers the same code to fix this in IE. Then, as you probably already guessed, that messed up the layout in all other browsers! Too bad I can’t feed IE arsenic so that the world would be rid of it… oh yeah, back to the problem.
I decided to leave my CSS correct for the other browsers and only give IE the alteration. For this, I went with the Star HTML Hack. This allowed me to target only IE with the incorrect CSS to fix my positioning problem. By doing it this way, if IE is ever truly CSS compliant (IE 7 maybe), then I won’t have to rework my CSS, I will just have to remove one piece of CSS. Oh the woes of IE.
> UPDATE: I did away with the hack and just used a little absolute positioning with negative margins to get my desired affect. The best part is that now I can add things to the sidebar and my little feed icon will follow the latest h2 where ever it goes.
As I fix these minor problems over the next few days, I’ll continue to add to this post. I figure that will be the easiest way to document my procedures since I have a lot on my plate at the moment, and don’t have time to fix them all at once. Please stick with me and if you see something wrong, glaring or minuscule, please let me know so it can be corrected.
> UPDATE: It seems that I have fixed the couple of minor problems I found. Wow, only two problems, that’s a record!
