Minor Front Page Redesign
After leaving my front page (visually) the same for about two years now (you can check it out for yourself at archive.org), I recently felt somewhat compelled (obligated) to actually do something useful after receiving repeated praises from Josh about my site (though, to be honest, I’m not sure what makes my site particularly any better than his … whatever). The idea actually struck me around 4:30 AM, right after I had lain down for bed; I knew that if I didn’t get up immediately to get the idea down on paper, it would be forever forgotten by the time I awoke. While that same situation plagues me with relative frequency, I almost never actually get up to ensure the idea’s survival.
I missed my first (11:15 AM) class the next morning, but was on time to my 12:45 lecture, where I quickly went to work coding up the idea. The idea is by no means particularly complex, just efficient and elegant. With about six lines of xhtml constituting five objects, and maybe three css id’s, the layout worked perfectly in Opera and Firefox (both boasting W3C standards compliance), and the code was fully compliant to the xhtml 1.0 strict standard. Unfortunately, Internet Explorer was another story. (Duh.) Here was the original xhtml code:
<div id="title">
<h1>p14nd4.com</h1>
<a href="/resources/" title="resources">/resources</a>
<a href="/gallery2/" title="gallery">/gallery</a>
<a href="/blog/" title="blog">/blog</a>
</div>
And the CSS basically consisted of:
div#title { position: absolute; top: 40px; left: 40px; color/border stuff; }
div#title a { display: block; position: relative; bottom: 7px; right: 0px; float: right; margin-right: 15px; color/border stuff; }
div#title a:hover { color stuff; }
Internet Explorer didn’t render the <div id="title"> the correct height, aligned the h1 to the top instead of middle, and didn’t have the links in the correct place. I was able to fix the link placement with moderate ease, by enclosing them all inside another nested <div>, which had position: absolute; right: 0px; bottom: -9px; and then just did float: right; margin-right: 15px; for the <a> tags. I believe this fixed the main div’s vertical size rendering issue as well, in IE. Getting the <h1> to vertical-align: middle; within the main div was another story, though. I probably worked on that issue alone for another hour or more. I tried various combinations of nested elements and other css attributes without success, until I tried nesting the h1 inside a div, with a border enabled. I stumbled across this solution
because I start putting borders on all my objects to debug where certain boxes are ending, beginning, hitting each other, etc. Regardless, I figured that just another nested div was the solution, so I immediately went to remove the testing borders, so the site would be suitable for public display (having half a dozen dashed red borders running through the header wasn’t particularly attractive). To my great confusion and horror, though, the h1 regressed to vertical-align: top after removing the borders. Sure enough, adding the border back onto the div re-fixed its alignment. I tried just setting a top border, so there wouldn’t be much visual evidence of this hack, but IE wouldn’t behave with just a top border; it needed all four. Eventually I conceded that it just wasn’t going to look quite right in IE, and moved on for the evening.
Today I finally got around to moving the new header to the main page, but again grew displeased with how it looked in IE. Another idea struck me, though, which managed to elude me yesterday evening. If you were to look at the code, you would again see an additional div containing only the <h1> element, with a style="border: 1px solid black; … which would normally result in an ugly visible border along the bottom of the header… I remedied this situation by overriding the border shorthand property immediately after declaring it, and eliminating the left, right, and bottom borders. In full, the code for that div tag reads as <div style="border: 1px solid black; border-bottom: 0; border-right: 0; border-left: 0;">. Don’t ask me why this happens to fix
IE’s rendering, but I’ll live with it, I suppose.