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 renderingDoes 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.
Is it a css/div layout or a css/table layout?
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.
No tables involved, just divs.
http://www.thisischris.com/badcss.html
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
I’m not code literate anymore. 🙁