CODEWITHSUNDEEP
htmlcssinternet-explorerradial-gradients
Andrus
Andrus

Reputation: 27919

How to force modern Internet Explorer to show proper gradient background in real web sites

body background is defined in inline css as

body {
  background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
  }

In real web sites latest Internet Explorer shows horizontal lines in background.

In IE developer tools I turned all other styles in body off, tried 2-color gradient, linear gradient and other colors, but problem persists.

How to force IE to show background without horizontal lines ?

Chrome shows proper background. Also Internet explorer shows proper background if only this style is used. Page 

<html>
<head>
<style type="text/css">
body {
  background: radial-gradient( #EAC39F, #CB690C);
  }
</style>
</head><html><body></body></html>

is shown properly. If there are more elements in page, horizontal lines appear. How to remove those lines in Internet Explorer ? jquery and jquery-UI are used in page.

Upvotes: 0

Views: 177

Answers (2)

dippas
dippas

Reputation: 60553

Since IE does not apply height to body, either you apply a fixed height to body or you apply a 100% heightto html tag in your CSS,

and if you don't need the background to repeat, apply, background-repeat:no-repeat.

Also If you are looking for a cross-browser support then you should use the vendors browsers.

Here is a snippet working in IE10+:

html {
  height: 100%
}
body {
  background: rgba(234, 195, 159, 1);
  /* Old Browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1)));
  /* Chrome, Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* IE 10+ */
  background: radial-gradient(ellipse at center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eac39f', endColorstr='#cb680c', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  background-repeat: no-repeat
}

Upvotes: 1

Kami
Kami

Reputation: 19407

The issue appears to stem from the fact that IE is not applying a height to the body element. As such the background gets repeated and you see the lines.

By applying

body {
  background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}

A similar effect can be seen at http://jsfiddle.net/xpz2tgp9/ in Chrome, IE, etc.

To resolve your issue, apply a specific height to the body element or add a clearing div that will force the body to have height value.

html,body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

See - http://jsfiddle.net/xpz2tgp9/1/

Upvotes: 0

Related Questions