SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display:table-cell oddity with IE8 and max-width

    On this page, I'm using display:table and display:table-cell in order to get a "flex box" layout on the video and the adjacent text.

    The idea is that the "description" div should flex as the width of the video in the adjacent cell increases or decreases. Its working great in all modern browsers and IE9. However, IE7 and IE8 are struggling with it. Obviously, IE 7 doesn't recognize display:table properties, but IE8 is far off. My questions are:

    1) How can I get IE8 back inline?

    2) What's a workaround for IE7?


    Code:
    .cb_video{width:947px;max-width:947px;margin:0 auto;padding:25px 0 15px 0 !important;display:table;}
    .cb_video{text-align:center}
    .cb_video .box{margin:0 auto;display:table-cell;vertical-align:top}
    .cb_video .box.description{max-width:90%;text-align:center;float:right}
    .cb_video iframe{border:1px solid #ccc;box-shadow:0 0 20px #333;border-radius:8px;padding:15px}

  2. #2
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, If you do not want to spend time rewriting a fallback stylesheet for IE7 I suggested using the .HTC file hack.

    Second, although I don't recommend unless the demand is statistically high enough, is to write a fall back stylesheet for IE 7 that uses floats. The main reason this is not needed is because IE 7 can be ignored.


    One workaround that I know of enabling "display: table" CSS in internet explorer 7 is to have some code manually add in a table into your page. This technique will work but not perfectly, the code uses the .HTC extension and relys on a server.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help there.

    I was able to get IE8 to play nice by dropping the max-width attribute on the .description element.


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
  •