[RESOLVED] IE6 rendering problem

[boycottIE]

Hi all,

I have a search bar on my webpage whose div is displaying at a height that is roughly twice what it should be. The page renders fine in FF2/3, Safari, Opera, and IE7, but I can't figure out what the problem is in IE6. Can someone help me out with this?

The site is:

http://www.indiana.edu/~meis/

Thank you!

Have to run for now, but I will attach screenshots later in case someone knows IE6 well but doesn't have it installed.

--boycottIE

[KDLA]

I suggest you apply a font-size to this, since you are using "em" to this area:

#search {
background-color:#E9E9C1;
text-align: right;
padding-right: 2em;
height: 1.4em; /* this makes div height correct in Opera, Safari, FF */
/* height: auto; this makes div height too big in Opera, Safari */
vertical-align: top;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #B9B9B9;
}
IE's default font sizes and line-heights are a little larger than other browsers.

[boycottIE]

Hi KDLA,

Thank you for your suggestion. I gave it a try, but no luck. Do you--or anybody else--have any other suggestions I should try out? I really have no idea what to do here.

I'm posting a screenshot--basically the searchbar div is twice as tall as it should be. :(

Thank you,

boycottIE

[KDLA]

Here ya go:

<style type="text/css">
#search{background-color:#E9E9C1;text-align:right;padding-right:2em;border-bottom:thin solid #B9B9B9;}
#search form {display: inline;}
</style>

[boycottIE]

You are amazing! Thank you so much for your help!

boycottIE