targeting images with overflow:hidden

to control float-drop issue in IE

[neophyte]

Hello All

I've designed some templates for a blogging system about 6 months back, but neither I nor my client, anticipated

non-breaking text strings or oversized images being uploaded into these non-liquid designs.

Designs are typical two column floats (nav and main content area are floated) so when something is put into these

areas which are over the maximum width level we get float drops.

Of course, and as usual, Firefox handles these problems without breaking the layout, and in IE i've used the

proprietary "text-wrap" property to deal with over-sized strings. Now I'm trying to work out how to handle oversized

images.

I can put overflow:hidden in a div which has images - which does the trick for IE - but then FireFox truncates any

overflowing text which may also be within that div.

What I want to do is target any "img" within the site

img {
font-size: 80%;

color: #000;
background-color: inherit;

border: none;

overflow:hidden;
}

with overflow:hidden - but for some reason, it's not working.

I've even tried using a class -

img.overflow {

overflow:hidden;
}

on each image, but that doesn't work either. Hummm.

What does work is if I hook overflow:hidden to a div which contains the image, but like I said, that causes text

overflow problems in FireFox.

To see what's going on, please go here: [ooops]

According to my client, overflowing text and images is acceptable in firefox - although it's ugly - but he can't have it break the site in IE.

Sure would appreciate any advise on how I can get overflow:hidden to target just the images on this site.

Thanks to all in advance!

Neophyte

[edited by: SuzyUK at 8:51 am (utc) on Feb. 5, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[Setek]

Please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

As for your problem:

overflow

only works when there is a set width or a set height, something set for something to overflow. Images, by default, are inline, and they will expand the height of the line to its height (plus margin and border, and in case of standards-compliant browsers, also padding) and fill as much width as is possible, while any other inline elements to the sides will flow on the same one line.

For

overflow

to work how you want it, you will have to set your images to display as block, and then give them a set width and/or height, and then hide the

overflow

. Otherwise, nothing will flow over :)

I can put overflow:hidden in a div which has images - which does the trick for IE - but then FireFox truncates any

overflowing text which may also be within that div.

This, in itself, sounds like a better solution, however. Couldn't you take the text you don't want to be affected by

overflow

out of the

div

?