The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to keep middle image sized properly in IE

  • # January 7, 2013 at 9:25 am

    I have a site that works fine in Chrome and other browsers, that is except IE ( go figure )

    what i have is background image that is divided into 3 pieces. the left and the right pieces are fixed in width and should not change. I’d like the middle piece to auto fill the space between the two edge images.

    a copy of my code can be found here:

    i have tried attaching my css to the html tag as well as the body tag and it doesn’t make a difference. I’ve tried the “trick” discribed here ( ) and here ( ) neither of which fit my particular need and I was unable to modify either example to work.

    on the plus side the viewing environment is fairly controlled and I don’t need to worry about backwards compatibility beyond IE 7.

    I would prefer to stick to a purely css solution if possible
    thanks in advance for any help that can be given.

    # January 7, 2013 at 12:56 pm

    figured out something that would work for me, not quite what i was hoping for but it works.

    # January 7, 2013 at 1:30 pm

    This reply has been reported for inappropriate content.

    @Jedireg, care to share in case someone else has this same issue?

    # January 8, 2013 at 7:16 am

    added the following code to my CSS statements

    ` .TopCenterMS
    position: Absolute;
    top: 0px;
    left: 287px;
    height: 116px;
    width: 562px;
    overflow: visible;
    border: none;
    background: #ffffff;
    background-color: transparent;
    z-index: 1;
    .TopCenterMS img
    position: absolute;
    top: 0px;
    left: 0px;
    height: 116px;
    width: 562px;
    z-index: 1;

    and then added some IE specific conditional statements in the body of my html as shown below

    ` < ![if !IE]>

    < ![endif]>

    while this doesn’t give me a center image that dynamically resizes with the page, it does ensure the IE stretches the image to completely fill the space between the two edge images when it renders the page.

    an interesting note however, the `< ![if !IE]>< ![endif]>` would not render correctly if formatted in the same format as the `` statement. IE would render it properly but not chrome. I suppose this is because chrome saw it as a comment and completely ignored it. took away the “–” on the beginning and ending of the code segment and chrome processes it completely as expected.

    if anyone else has another way of doing this or improving on it, i’d be interested to see it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed