Home/ Questions/Q 7930031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T20:17:07+00:00

We have a website that’s basically three columns, each with a different color applied

  • 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
    );
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0