I have created a page with a background as a gradient and I have 3 divs on the gradients with the background white which are the three columns. Within the three columns there is text and this looks how it should in Google Chrome, the gradient is longer in Firefox so the text is much higher and the same is with Internet Explorer.
I want to make everything look the same as it should accross all the latest desktop browsers. This is 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 >Nos aseguraremos de que para publicar un comentario. Pero la necesidad ahora que funcionario regional policial en los Estados Unidos y el diseño. La escuela de negocios de postgrado o de desarrollo profesional a través del valle de la tierra. Sin impacto escala caliente, el autor y la propaganda corporativa. Mañana flechas peinado garganta. El hogar de algunos, pero no es el principal, tablero ahora. No empujar un vehículo. Algunas pólizas para los desarrolladores. Pero la necesidad ahora egestass reservados.
</p>
</div>
</div>
<div class='article2' >
<h1 >Col2</h1>
<div class="textHeight">
<p >"Nos aseguraremos de que para publicar un comentario. Pero la necesidad ahora que funcionario regional la aplicación de la ley en los Estados Unidos."
</p>
</div>
</div>
<div class='article3'>
<h1 >Col3</h1>
<div class="textHeight article3TextWidth">
<p>Es importante crear una amplia gama de conocimientos para un teléfono. Hasta antes de la película, pero los principales miembros de la vida, el tiempo no está. El sistema dinámico de almacenamiento masivo y desarrollar consejero de desarrollo económico. Eventos en la general. Más competencia en el mercado de seguros, sino también a la hora de hacer compras en el centro. Afiliaciones Profesionales churn de clase por nuestro sindicato, himenaeos muy principiantes. Esto es sólo por conveniencia. Afiliaciones Profesionales churn de clase por nuestro sindicato.
</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;
}
Please let me know if this is the best way to do it, or is there another way to do it? I need this to work as it is on all the latest browsers. The problem is mainly with Internet Explorer as it renders differently on IE7, 8 and 10. IE7 completely removes the gradient at the bottom.
Thanks.
