0

We have a website that's basically three columns, each with a different color applied via linear gradients. While this works fine in Firefox and Chrome, it breaks in IE8, e.g., the background is white in the far two columns, the image on the left column isn't sized properly (not sure which CSS element is responsible for breaking that). It looks perfect in Chrome but awful in IE8.

The site is here: http://clubsatcrp.com/walkingchallenge/

Anyone have any thoughts on some solution to fix this issue, and at the least make it look the same in terms of the column's background colors in IE8? I'm perfectly fine not fixing the issue but since it's for a corporate program, and our company uses IE8, it's kind of an issue.

Here's part of the CSS (linear gradients):

background: -webkit-linear-gradient(
        left, 
        #c63d11,
        #c63d11 33.33%,
        #CD0000 33.33%,
        #CD0000 66.66%,
        #000000 66.66%,
        #000000
    );
background: -moz-linear-gradient(
        left, 
        #c63d11,
        #c63d11 33.33%,
        #CD0000 33.33%,
        #CD0000 66.66%,
        #000000 66.66%,
        #000000
    );
background: -ms-linear-gradient(
        left, 
        #c63d11,
        #c63d11 33.33%,
        #CD0000 33.33%,
        #CD0000 66.66%,
        #000000 66.66%,
        #000000
    );
background: -o-linear-gradient(
        left, 
        #c63d11,
        #c63d11 33.33%,
        #CD0000 33.33%,
        #CD0000 66.66%,
        #4e9dd1 66.66%,
        #4e9dd1
    );
Nietzsche
  • 349
  • 4
  • 18
  • possible duplicate of [CSS3 cross browser linear gradient](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient) – Rob W May 12 '12 at 20:13
  • `-ms-linear-gradient` is a IE10 feature. Before that, the `filter` property has to be used. This is fully covered in the [marked duplicate](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient). – Rob W May 12 '12 at 20:14
  • I assumed there was a better way, as we don't actually need gradients but two solid colors of a specific width (33.33%, 66.66%). The gradient filter isn't behaving as I want it too. Thoughts? – Nietzsche May 12 '12 at 20:44
  • In your existing code, you should've added at the end an unprefixed instruction with `linear-gradient` property, for the near or far future when a vendor will consider it. This is the future-proof instruction ;) (see my answer for another approach) – FelipeAls May 12 '12 at 21:14
  • @Greg Using multiple backgrounds: http://jsfiddle.net/3N5ch/1/. This method is not supported by – Rob W May 12 '12 at 21:14
  • @RobW This question isn't a duplicate IMHO as linear gradients can be used in many situations. Fallback can be a simple background-color or background-image (for a button), filter when it doesn't blur text. Here it's used for faux-columns and there are numerous existing techniques for doing that. Not just a CSS3 question on nearest property or polyfill; unrelated techniques can do the same. – FelipeAls May 12 '12 at 21:22

1 Answers1

0

If you need 3 columns of equal heights even on IE8, then you can use display: table; (and *-cell).
Then you can define a background-color on each, with a matching color to be sure it's readable in all circumstances (see WCAG 2.0 F24 specifying foreground colors without specifying background colors or vice versa)

Fiddle: http://jsfiddle.net/VbGap/

Rendering on IE6 and IE7 can be improved with very little effort, but it won't render as well.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Any reason why the background color, as in your example, would only go halfway down the page? The bottom of each column is white. IE8 and IE9 seem to have this problem. – Nietzsche May 13 '12 at 00:07
  • You need a 100% height parent (`body` or else). Not sure if it comes from the iframe in JSFiddle or if it's me who is really not accustomed to this ;) – FelipeAls May 13 '12 at 05:36
  • Great, thanks. I'm not accustomed to this either, as I'd much prefer to just not support IE8 at this point... – Nietzsche May 13 '12 at 23:35