This is Chris dot com

Wednesday, May 28, 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.

Labels: ,


posted by Christopher at 4:24 PM

5 comments - Post a Comment
------------------------------------

[top]

5 Comments:

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

By Anonymous Kevin Dibble, at 5/28/08 6:42 PM  

----------

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.

By Anonymous Kevin Dibble, at 5/28/08 6:49 PM  

----------

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

By Blogger Christopher, at 5/28/08 9:20 PM  

----------

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

By Anonymous kevin, at 5/28/08 10:10 PM  

----------

I'm not code literate anymore. :-(

By Blogger Jason, at 6/11/08 6:46 AM  

----------

Post a Comment


Most Recent Posts:


Archives

July 2000 ~  August 2000 ~  September 2000 ~  November 2000 ~  February 2001 ~  March 2001 ~  May 2001 ~  June 2001 ~  July 2001 ~  August 2001 ~  October 2001 ~  November 2001 ~  December 2001 ~  January 2002 ~  February 2002 ~  March 2002 ~  April 2002 ~  May 2002 ~  June 2002 ~  July 2002 ~  August 2002 ~  September 2002 ~  October 2002 ~  November 2002 ~  December 2002 ~  January 2003 ~  February 2003 ~  March 2003 ~  April 2003 ~  May 2003 ~  June 2003 ~  July 2003 ~  August 2003 ~  September 2003 ~  October 2003 ~  November 2003 ~  December 2003 ~  January 2004 ~  February 2004 ~  March 2004 ~  April 2004 ~  May 2004 ~  June 2004 ~  July 2004 ~  August 2004 ~  September 2004 ~  October 2004 ~  November 2004 ~  December 2004 ~  January 2005 ~  February 2005 ~  March 2005 ~  April 2005 ~  May 2005 ~  June 2005 ~  July 2005 ~  August 2005 ~  September 2005 ~  October 2005 ~  November 2005 ~  December 2005 ~  January 2006 ~  February 2006 ~  March 2006 ~  April 2006 ~  May 2006 ~  June 2006 ~  July 2006 ~  August 2006 ~  September 2006 ~  October 2006 ~  November 2006 ~  December 2006 ~  January 2007 ~  February 2007 ~  March 2007 ~  April 2007 ~  May 2007 ~  June 2007 ~  July 2007 ~  August 2007 ~  September 2007 ~  October 2007 ~  November 2007 ~  December 2007 ~  January 2008 ~  February 2008 ~  March 2008 ~  April 2008 ~  May 2008 ~  June 2008 ~ 


All original content on this website (including text, images, and any other original works), unless otherwise noted, is ©2000-2007. Licensed under a Creative Commons License.

Amazon Honor System Click Here to Pay Learn More