Posts from May 28th, 2008

Let’s see if anybody out there in teh intarweb tubez can help me with this problem.

I was finishing up the re-design of everafterstore.com when I stumbled upon a strange rendering problem. For some reason the top margin above a certain line of text was two pixels lower in Internet Explorer than it was in Firefox. I could not for the life of my figure out why. I scoured my CSS for possible problems, but padding, margin, background-align and the like were all perfectly valid.

Then I realized it was because the line of text I was using had an inline <input type="text"> element, and for some reason Firefox and IE display inline text boxes differently: Firefox aligns the top of the box to the top of the line-height, whereas IE aligns the bottom of the box to the bottom of the line-height. It wasn’t very noticeable (as I said, only two pixels), but look at what happens if you have (for some reason) a very tall text input box:

Firefox rendering

Internet Explorer rendering

Does anyone know how to prevent this? Is there a Stylesheet hack that makes it display the same way in both browsers (I don’t really care which way, just as long as its consistent)? I’m hoping one of my code-literate friends (tangentbot, ninjasockmonkey, jeffthefish, codelove, etc.) will see this post and help me out.

Perhaps one of the strangest comic book stories of recent years: Indiana Jones finds the remains of Han Solo in the Pacific Northwest.