SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Ex-SitePointer silver trophy
    Patrick's Avatar
    Join Date
    Oct 2000
    Location
    Harbinger, NC, U.S.A.
    Posts
    4,126
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    overflow: hidden in IE7?

    Hey all,

    I'm just curious - does overflow: hidden work in IE7? I am working on my ads and you have this format:

    Link
    Description Line 1
    Description Line 2
    URL

    URL is one long, non breaking word. So, it can stretch out the column that it's in. So, I added overflow: hidden and it works great in Firefox... but not in IE7. I don't really know all that much, but I have been looking at it for a long while, doing some Googling, trying different things... and I just can't seem to get it to work.

    So, I thought I'd ask to see if there was some sort of known issue or something. Took a look at the CSS FAQ and saw some stuff on overflow, but didn't know if it was that or not.

    I appreciate it.

    Thanks,

    Patrick

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hey Patrick,

    overflow: hidden; works in all browsers (if by 'works' you mean chopping off content that hangs outside the given dimensions) but you do need to set the dimensions, as in width: 100%; on the parent.

    I wouldn't set overflow on the really long word - I would set it on the parent container.

    If that makes no sense at all then i'll need to see the code you're working on.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Patrick,

    As Mark said overflow should hide the content as long as there is a width for it to work on.

    e.g.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    p{
        width:100px;
        background:red;
        overflow:hidden;
    }
    </style>
    </head>
    
    <body>
    <p><a href="#">thisisalonglinkthatwillbreakoutoftheparentcontainer</a></p>
    </body>
    </html>
    For IE browsers you could use word-wrap instead and force it to wrap at the containers edge.

    e.g.
    Code:
    p{
        width:100px;
        background:red;
        overflow:hidden;
        word-wrap:break-word;/* proprietary IE code (css3 proposed) */
    }
    It won;t validate (yet) so its probably best hidden in conditional comments.

    If the problem is something else then we will need to see some code

  4. #4
    Ex-SitePointer silver trophy
    Patrick's Avatar
    Join Date
    Oct 2000
    Location
    Harbinger, NC, U.S.A.
    Posts
    4,126
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Mark and Paul. I appreciate the assistance.

    This has been sorted.

    Thanks,

    Patrick


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
  •