Re: [WSG] Targeting specific images with overflow:hidden
At 2/2/2007 05:44 PM, Cole Kuryakin wrote:
What I want to do is target any "img" within the site
img {
...
overflow:hidden;
}
with overflow:hidden - but for some reason, it's not working.
Overflow applies to the contents of a block, not to the block
itself. img{overflow:hidden} would make sense only if an image could
have content, e.g.:
but that's not HTML.
See:
CSS 2.1 Specification
11 Visual effects
11.1 Overflow and clipping
http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Targeting specific images with overflow:hidden
Cole Kuryakin wrote:
[...] To see what's going on, please go here:
http://www.x7m.us/_problems/index_problem.htm.
Sure would appreciate any advise on how I can get overflow:hidden to
target just the images on this site.
You can target all images with 'max-width' in the good browsers, and add
an acceptable fix for IE6 through its own bugs.
Add the following...
img {max-width: 100%; height: auto;}
* html #gallery {overflow: hidden; width: 170px;}
* html #gallery img {position: relative; /* overflowing part visible */}
* html #content_main {overflow: hidden;}
* html #content_main img {position: relative;/* overflowing part visible */}
...and then decide whether you want the overflowing part of the images
visible in IE6, or not.
Just delete the '... img {position: relative;}' declarations and the
overflow will be completely hidden.
The layout won't break in IE6 either way.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Targeting specific images with overflow:hidden
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]
***
