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:
http://www.x7m.us/_problems/index_problem.htm.
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!!!
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
