SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    overflow:hidden and IE

    I have seen this effect used on other sites, but am at a loss right now how it is acheived. I need to do something similar on my own site as a matter of urgency!



    Can anyone offer any clues as to how this is possible? Otherwise, how could i dynamically resize images that users link using [ img ] [ /img ] tags?

    Suggestions much apprreciated!
    Last edited by ZernanToledo; Nov 1, 2006 at 05:35. Reason: Nature of problem has changed.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a background image. It will be cropped if it is larger than the container.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Use a background image. It will be cropped if it is larger than the container.
    You see that's not really an option. The images will be inline. It's basically a web forum much like this, but we want to limit the width of the images users can link so it doesn't mess up the layout.

    I've seen it achieved on GNN.tv, you can see exmple of it here. (I am rather embarased of the content of this particular discussion however). Positive I seen a similar thing on **** (D i g g ), however I can't find an instance of it right now.

    If anyone can offer alternative solution I'm all ears ;o) We're using ASP classic however the code I've seen for resizing seems rather complex, and I've had problem applying this to images "on the fly" when people link them. It's been a nightmare to be honest.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to let y'all know I think i have figured it out. If the box containing the image has this style big images will be "truanced" in the overflow.

    #container{
    overflow: hidden;
    }

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the word you're looking for is "Truncated"? Crop is probably a better word when you're talking about images though

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    You can dynamically resize images if you take the width and height out of the html and put this into your css:

    Code:
    img.header {
    width:100%;
    margin: 0 auto;
    min-width: 400px;
    }
    Of course, set the min-width to the size you want it and choose the appropriate class name.

    In your html, you need to put

    Code:
     
    <img src="images/image-name.jpg" class="header">
    substituting the class name you chose.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thought I had this cracked, but the overflow:hidden attribute refuses to work in IE - large images still destroy the design. I did get it to work in IE when i changed the CSS to:

    Code:
    #container div {
    	width: 100%;
    	overflow: hidden;
    	float: left;
    }
    Its the float:left that got it working, but this has had nightmarish consequences for floats contained within the div. Are there any other ways to get this to work in IE?

    Also, I discovered an article about this 'quirk' but it doesn't really offer any viable solutions. Because the text in the div can be of any size, its crasy to have to define a height to get it to work.



    Thanks

  8. #8
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the containing DIV as block level element (display:block; ) and don't show any overflow (overflow:hidden; ).

    PHP Code:

    #container div {
        
    width200px;
        
    overflow:hidden;
        
    display:block;

    This will hide any part of the image that is outside the boundaries of the containing DIV.

    Si

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by si@ld
    Set the containing DIV as block level element (display:block; ) and don't show any overflow (overflow:hidden; ).

    PHP Code:

    #container div {
        
    width200px;
        
    overflow:hidden;
        
    display:block;

    This will hide any part of the image that is outside the boundaries of the containing DIV.

    Si
    I'll give this a go thanks.

    We've got a hard launch date fast approaching and we're using this solution becuase we can't find anyone to write a javascript tht will dynamically resize the images.

    The overflow:hidden was really our only solution in the short term and the fact that IE doesnt' support it has really caused massive problems. Help here is greatly appreciated.

  10. #10
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ZernanToledo
    I'll give this a go thanks.

    We've got a hard launch date fast approaching and we're using this solution becuase we can't find anyone to write a javascript tht will dynamically resize the images.

    The overflow:hidden was really our only solution in the short term and the fact that IE doesnt' support it has really caused massive problems. Help here is greatly appreciated.
    I've just done a quick test shown below. It works fine in IE6 and 7, Firefox and Opera.

    PHP Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
        <
    title></title>
        
        <
    style>
        
        
    #container {
        
    width200px;
        
    overflow:hidden;
        
    display:block;
    }
        
        </
    style>
        
    </
    head>

    <
    body>

        <
    div id="container">
        
            <
    img src="mage02.jpg" width="400" height="400" />
        
        </
    div>

    </
    body>
    </
    html
    Si


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •