Hi!

I have css box that contains a form with a search field and small image link. It works perfectly in all major browsers, PC & Mac, including IE8.

Unfortunately the height of the box is showing way too big in both IE 6 & 7.

.padbcont_search { width: auto; margin-top:7px; padding-top: 5px; margin-bottom: 9px; overflow: hidden; background-color:#fc6; color:#333; font-size:0.8em; }
.padbox_search { padding-left: 6px; padding-bottom: 4px; }

Tried different heights attributes but deleted the height altogether because IE 6 & 7 did not overflow correctly and cropped the image link when browser font was enlarged.

Anyone know a fix? Thanks :-)

have you tried adding height attribute?

Thanks Izzy,

Yes, but adding height makes the box ‘look’ right but not ‘act’ right - it prevents the contents of the box from overflowing when browser text is enlarged (the image link disappears.) Deleting height makes it work perfectly in all major browsers (PC and Mac) except IE 5.5. 6 and 7, where the box height extends to twice its size, pushing out any content appearing below.

I couldn’t find a fix for IE using CSS so scoured the Web and found a workaround which seems to do the trick. It’s a Conditional Comment:

<!—[if lt IE 8]>
<link rel=“stylesheet” type=“text/css” href=”/folder/css/newname.css” />
<![endif]—>

Inserted directly under the code of your regular stylesheet, it seems to make the three pre-8 IE browers behave a little better. You have to create and name a separate style sheet; in my case, adding the height attribute and tweaking the padding a px.

This might be useful for keeping in your toolbox: might come in handy one day ;-)

Hi Harrisonparke, Yay!! You nailed it.

I may also use the conditional comment on one of my web page. The width on my web page seems to expand on IE browser and wider screen PC but looks good on Safari, Chrome, Opera, Firefox and 5.2 IE on Mac.
I am using em instead of pixel on my width and I like it because of its usability and flexibility. Do you think the em is causing it to behave funky?  Should I add max-width for IE on the conditional comment?

Thanks

Sorry Izzy, I’m not clued up on em versus px I’m afraid. I use px for height and width throughout my site; em only for fonts. Best thing to do is to try variations and keep checking IE browser shots here: http://ipinfo.info/netrenderer/

Hi Harrisonparke, thanks for the info. I’ll check it out.