1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

max-width with IE8

Discussion in 'CSS' started by stevenswing, Apr 5, 2010.

  1. #1
    I am having some trouble with setting max-width for images in IE8.

    The following is my CSS code:
    .forumimage {max-width:600px; height:auto; width:auto;}
    Code (markup):
    In Firefox, this works perfectly. However, in IE8 the parent container is stretched to the original image size (not 600px), but the image is actually resized to 600px as requested. How can I stop the parent being stretched to the original image size? Is this a know bug?

    Thank you for your help.
     
    stevenswing, Apr 5, 2010 IP
  2. GameInfiniti

    GameInfiniti Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This should help u: nfine.net/bugs/ie8bug.html
     
    GameInfiniti, Apr 5, 2010 IP
  3. stevenswing

    stevenswing Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Does this include my container stretching problem? As I said, IE8 resizes the image to 600px wide correctly, it's just that the parent container is left at the original image size. Any ideas?
     
    stevenswing, Apr 5, 2010 IP
  4. Headshot0123

    Headshot0123 Peon

    Messages:
    237
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Without actually seeing the rest of your code my guess would be it is a problem with the parent div itself. Try setting a max-width on the parent div and adding overflow:hidden; to it as well.
     
    Headshot0123, Apr 5, 2010 IP
  5. stevenswing

    stevenswing Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The parent container is a table set at 100%. Maybe I should set the table as "Fixed" in CSS? Is it possible to set it as fixed with a percent size?
     
    stevenswing, Apr 6, 2010 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    <Jamie>Well there's your problem...</Jamie> Sounds like you are using tables for layout then - which you shouldn't be... at which point it sounds like you've got MUCH bigger code issues than one table's behavior.

    But again, without seeing the ENTIRE page live, anything we say is going to be a wild guess - you're in "and this is why we can't help you" territory.
     
    deathshadow, Apr 9, 2010 IP
  7. pixelz

    pixelz Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    try the following:
    .forumimage {display:block;max-width:600px; height:auto; width:auto;}
     
    pixelz, Apr 10, 2010 IP
  8. sorin_postelnicu

    sorin_postelnicu Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I have the same problem, but not with an image, but with a long text containing no spaces, which IE should wrap to the given max-width.

    As you can see in this fiddle, the result is like this: IE wraps the text but leaves some empty large space to the right of the text:
    http://jsfiddle.net/L9h4a/2/

    Also when trying to apply the same CSS to the parent TD:
    http://jsfiddle.net/L9h4a/

    Finally, the only solution which seems to work is to set not only the max-width but also the width:
    http://jsfiddle.net/L9h4a/3/


    But of course the disadvantage is that the column will never be less than the given width, even if the content width is less than the given column width.
     
    sorin_postelnicu, Jan 18, 2013 IP