CSS Box problem - overflow?

Hi!

I'm having a niggling problem sorting out a css box containing a form with an input field and small image link. When a user enlarges the type in their browser, the image/link is pushed out of the box and disappears. This happens cross-browser and cross platform, PC and Mac ( Explorer, Firefox, Safari, iCab, etc.)

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

I've changed the code a few times and shortened the form field but still get the same problem.

You can view source code and see what's happening when browser type is enlarged here: http://www.obooko.com

Any ideas?

Thanks

 

.padbcont_search has a height set on it, which will crop anything that overflows out of it. Try setting it as a min height, or just don't set a height on that at all!

 

Thanks pmek.

I have tried deleting height but it didn't work; same problem occurs. Also set height to auto but still no joy. It's a real niggle this one.

 

I just removed the height attribut (34px) altogether from that CSS class in firebug and it works fine without it. Are you sure you're removing the right thing? Or do you not have access to the CSS?

 

Yes, that's what I removed, but it didn't work cross browser on PC and Mac. I have just removed it from the stylesheet on the server so you can take a look. I've just checked in Firefox and Safari and problem remains :-(

 

Height is still set on .padbcont_search on my mac. You sure you're changing the right thing??

 

Honest, I have This is what's now in the stylesheet:

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

I'm using a Mac too but I ditched Firebug so I can't see what you are seing - I'll download it again.

I don't this overflow is requred if there is no height.

 

Seems to be working for me now, tried clearing your cache?

 

Yes, same problem. I have checked in Firefox, Safari and iCab. This is a mystery.

 

Weird: just checked on my daughter's imac (snow leopard) and it seems to work. I've just restarted my mac and hey presto! it seems to work too; although it needs a bit of padding underneath. I'll switch on the dreaded PC and see what it's like on there.

 

Result! Thanks fror the help pmek; gawd knows what I was doing wrong yesterday but clearing the height today worked! Just got to get the padding right as it's way out in IE7 on PC.

 

I think the guy who originally coded this got it to look right across all browsers by using the fixed height attribute. Unfortunately, removing it throws out the box in IE. I'll have to try some box model hacks. Thanks again pmek.