It looks terrible, but I can't figure out what's causing the trouble. It may be the gradient codes I'm using. I just got them from a gradient editor since I'm still learning how to do it myself.
Here's what I believe is the relevant css:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Opera */
background-image: -o-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BDD6E0), color-stop(1, #0D3257));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #BDD6E0 0%, #0D3257 100%);
background-color: #0D3257;
padding: 0px 0px 40px 0px;
text-align: center;
}
body {
margin-bottom: 20px;
margin: 0 auto;
position: relative;
border: none;
max-width: 960px;
}
Here is the website page that shows the problem:
http://www.drjoshweight.com/services.php
Any page with enough content makes the gradient expand down and it looks nice.
Can anyone tell me what I'm doing wrong here?
Thanks,
Ron