So, I've built this page with a gradient background and three white divs acting as columns. Each column contains some text, and it displays perfectly in Google Chrome. However, the gradient appears taller in Firefox and Internet Explorer, pushing the text higher up.
I want everything to look consistent across all modern desktop browsers. Here's the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class='container'>
<div class='article1'>
<h1 >Col1</h1>
<div class="textHeight">
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</div>
</div>
<div class='article2' >
<h1 >Col2</h1>
<div class="textHeight">
<p >"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
</p>
</div>
</div>
<div class='article3'>
<h1 >Col3</h1>
<div class="textHeight article3TextWidth">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</div>
</div>
</div>
</body>
</html>
The CSS
h1{
font-family:'Georgia';
font-size:0.940em;
padding:0 0 0px 10px;
}
p{
font-family:'Georgia';
padding: 10px 10px 0px 10px;
font-size: 0.680em;
line-height: 2em;
letter-spacing:0.7px;
}
.container {
position:relative;
max-width:800px;
max-height:600px;
overflow: hidden;
padding: 21px 18px 0px 0px;
background: linear-gradient(to bottom, #800000 0%,#3D3D3D 100%);
margin-left:20px;
margin-top:20px;
background: -ms-linear-gradient(#800000, #3D3D3D);/*For IE10*/
background: linear-gradient(#800000, #3D3D3D);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#800000', endColorstr='#3D3D3D');/*For IE7-8-9*/
height: 1%;/*For IE7*/
}
.article1 {
position:relative;
height: 500px;
width: 177px;
float: left;
margin: 0 0 21px 21px;
background-color: #fff;
padding: 10px;
}
.article2{
position:relative;
height: 500px;
width: 177px;
float: left;
margin: 0 0 21px 21px;
background-color: #fff;
padding: 10px;
}
.article3 {
position:relative;
height: 500px;
width: 320px;
float: left;
margin: 0 0 21px 21px;
background-color: #fff;
padding: 10px;
}
.article3TextWidth{
width:300px;
}
.textHeight{
height:420px;
}
If there's a more efficient way to achieve consistency across browsers, please advise. The issue mainly lies with Internet Explorer, particularly versions 7, 8, and 10. IE7 completely ignores the gradient at the bottom of the page.
Any suggestions would be greatly appreciated!