Wednesday, 28 May 2008

A Programming Question That’s Bugging Me

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 renderingFirefox rendering

IE renderingInternet 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.

Categories: Links, Work.

5 thoughts on “A Programming Question That’s Bugging Me”

  1. Kevin Dibble says:

    Is it a css/div layout or a css/table layout?

  2. Kevin Dibble says:

    The big issue, without seeing the code, that comes to mind is that IE adds proprietary paddings and margins to elements. There is a css hack that fixes this:

    * {
    padding: 0;
    margin: 0;
    }

    this sets all elements to have a margin and padding of zero. ALL elements. so you may have to go through and adjust some padding and margins for paragraphs and such.

  3. Christopher says:

    No tables involved, just divs.
    http://www.thisischris.com/badcss.html

  4. kevin says:

    I see… input text has a special value of height that you can assign it that may react better to cross browser that isn’t a style.

    My other suggestion is to make an input area that is larger use the textarea attribute. It allows for larger input areas that are better for cross browsers.

    http://blooberry.com/indexdot/html/tagpages/t/textarea.htm

  5. Jason says:

    I’m not code literate anymore. 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *

« Previous Post: Sasquach is Really Just Chewbacca
» Next Post: Forgetting Sarah Marshall (2008)