The Soulpass Project

A while back I did a personal site, and kept running into a small problem. On some pages, there was enough content to force the page to scroll. On pages that did not have enough content, the vertical scrollbar in Firefox would not display. This caused the page to shift about 15 pixels to compensate for the missing scrollbar. Internet Explorer always displays a scrollbar; If there is not enough content for the page to actually scroll, it disables it. It really might not be a huge deal, but if you are a nit-picker like me, you like having the consistent page real estate. After some research and trial-and-error tweaking, I settled upon a solution. The addition of this bit of CSS did the trick:

html {
min-height: 100%;
margin-bottom: 0.01em;
}

Is this helpful to you? Leave a comment!

Hah, I just added an annoying popup that only affects users of Internet Explorer 6. It links to http://www.browsehappy.com/, which recommends other browsers as alternatives to IE. hah, this is funny, I imagine a lot of people won’t like it though… Here’s a screen shot:

Also, I have put PHP back into Apache Module mode in order to get Exhibit working again… The WordPress SpellingChecker plugin doesn’t work in Module mode, but I’m sacrificing it because I’ve found SpellBound, a Firefox spell check plugin (thanks to PhotoMatt). Cheers.

I ran into another IE problem creating the Soulpass design. It seems to be a variation of “The IE Doubled Float-Margin Bug“. The problem lied in the footer DIV. For some reason the top margin of the footer was always exactly twice what it is supposed to be. Both the top and bottom margins of the footer are supposed to be 20 pixels, but in Internet Explorer the top margin was doubling to 40 pixels. Grrrr, frustration. I searched the net for answers, and came up with the above-mentioned article. It seemed to be very close to the problem that I was having, but not exactly. The margin effect in the Soulpass template footer is creating by adding 20 pixels of padding to the top and bottom of the P tag, forcing the #footer DIV to be taller. The solution in the article mentions adding {display: inline;} on the float, but my #footer DIV is not floated. The solution that worked for me was adding an absolute width to the #footer DIV. Since the page is set to be 760 pixels and I wanted the footer to match, I gave the #footer DIV a width of 760 pixels and *voila* … IE began to cooperate. Yay!! I hope this helps someone else as well!