My HTML is rusty but I'm pretty sure something is wrong - html

so i've been having a really tough time after a month away from HTML, not much whatsoever, however I seem to have lost the knack with something, and that's getting my div/any html element to not be a few pixels from top of a page and even with a fixed div, it is still around 8 pixels away from the top and left of my page and I have no idea what is going on. There's no padding, no margin, nothing like this and I am utterly perplexed at why this is happening.
<html>
<head>
<title>
CrystalBallStories
</title>
<link rel=stylesheet link="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="main">
<nav id="nav">
<div class="nav_opt">
Home
</div>
</nav>
</div>
</body>
</html>
Is the HTML and the CSS is:
html
{
font-family:Corbel, 'Lucida Grande', Helvetica, sans-serif;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#main
{
background-color:#000000;
position:fixed;
height:98%;
width:80%;
color:#DDDDDD;
overflow-y:scroll;
text-wrap:break-word;
margin-left:10%;
margin-right:10%;
border-top-left-radius:30px;
border-top-right-radius:10px;
}
#nav
{
background-color:rgba(69,72,77,0.8);
height:8%;
}
This used to all work for me before but it is, for some reason, a little away from the top and left as I said before, as can be seen on the site: http://www.crystallballstories.com
Any help is appreciated as this is driving me insane!


html,body{margin:0}
Problem solved.

Related

Building a Product Box using images w/ CSS

I designed a very basic looking box in Photoshop that I would like to use to show product information inside of. It basically consists of a Header, Body and Button (each a separate image) that look like the image below.
How can I use CSS/HTML to piece these together? I just need to show header text in the top box and bullet points in the body area, but not sure how to actually build this from the image files.
I know the HTML will look as such, I am just confused as to how to actually build the box, such as stacking the images and overlaying the button in that position over the body.
<div id="product_box">
<div id="header">Title Here</div>
<div id="body">
<ul>
<li>Point here</li>
<li>Point here</li>
<li>Point here</li>
</ul>
</div>
<div id="button></div>
</div>

Well Have a look at:
http://jsfiddle.net/2A2Fn/4/
You don't have to change your html markup just use css:
Here is relevant CSS:
#product_box{
border:2px solid #bbc;
border-radius:15px;
display:block;
width:50%;
height:100%;
position:relative;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding:0px; !important
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header{
background:#aaf;
width:100%;
height:50px;
border:0px;
border-bottom:1px solid #99b;
padding-top:15px;
padding-bottom:15px;
border-radius:5px;
background: #b5bdc8; /* Old browsers */
/* gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#body{
padding-bottom:15px;
}
#button{
background:#756;
border:1px solid #645;
display:block;
width:150px;
height:50px;
border-radius:5px;
position:absolute;
bottom:-25px;
right:33%;
color:#fff;
box-shadow:5px 5px 5px rgba(0,0,0,0.4);
text-align:center;
font-weight:bolder;
font-size:15px;
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
text-align:center;
color:#fff;
font-weight:bold;
}
And Here is output of that:
EDIT
According to your comment here is updated code:
http://jsfiddle.net/2A2Fn/5/
and its output:
Hope it helps.

It can be done using only HTML/CSS.
Use CSS gradient for it.
Here is the DEMO

Seeing your CSS code would help. This is how I would achieve what you want:
Set a div element to the desired height of the box. Apply a border and border-radius property as desired, probably 2 px border and a radius of 10-15 px.
Take the header image, and crop it down to 1 pixel wide (for memory conservation). Then set a div element and use this 1pixel wide image as the background, repeat x, but not y. Set the height of the header to the height of the gradient image.
Then, make another div inside the container div. Take your second gradient image and again reduce it to a 1 pixel width. Set it as the background for this div with repeat-x. You'll have to set the height of the header div to the difference of the height of the header and the height of the container.
Your button can then be placed as a link, probably in another div element.
All this can be coded something like as follows:
CSS:
div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}
div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}
div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}
And the HTML:
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>
This should do what you want. You'll need to specify the button CSS as well which I didn't do as I'm on mobile right now.
Hope this helps you!

Two background colors (Horizontal)

I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.
Here is a screenshot of what i mean,
Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?

There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.
HTML:
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/3/
This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:
Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.
HTML:
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/4/
The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.
Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}
http://jsfiddle.net/Q66Xn/
Disadvantages: Complex CSS which is difficult to easily edit later on.

You're issue isn't related to bootstrap specific, as Ollie stated.
Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).
I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.
Example
http://jsfiddle.net/wLw4r/4/
Markup
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}

You will struggle to do this using only bootstrap.
You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs.
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
}

Same line div tags

Sorry to ask such a stupid question, but it's been quite a long night and I cannot seem to get my code to display the divs on the same line.
I've searched all over Stack Overflow and none of the answers has helped. It might be a very stupid mistake I have done but I haven't noticed it.
<td>
<div class='sameline'>
<?php
echo "<div class='hbox'>Max Health: $hp</div><div class='mbox'>Max Mana: $mana</div>";
?>
</div>
</td>
.hbox {
color:white;
background: #dd0408; /* Old browsers */
background: -moz-linear-gradient(top, #dd0408 0%, #dd0408 0%, #bf0326 0%, #d30407 38%, #b20002 76%, #ba0003 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd0408), color-stop(0%,#dd0408), color-stop(0%,#bf0326), color-stop(38%,#d30407), color-stop(76%,#b20002), color-stop(100%,#ba0003)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* IE10+ */
background: linear-gradient(to bottom, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd0408', endColorstr='#ba0003',GradientType=0 ); /* IE6-9 */
text-align:center;
width:45%;
height:16px;
border:1px solid #333;
}
.mbox {
color:white;
background: #00a4f7; /* Old browsers */
background: -moz-linear-gradient(top, #00a4f7 1%, #00b7f9 43%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#00a4f7), color-stop(43%,#00b7f9), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4f7', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
text-align:center;
width:45%;
height:16px;
border:1px solid #333;
}
#sameline {
overflow: hidden;
white-space: nowrap;
}

.hbox, .mbox {
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
display:inline-block;
}

Add float:left to both .mbox and .hbox.

I take it you need the two divs inside <div class="sameline"> to appear next to each other
so a css rule like
.hbox, .mbox {float:left}
Should do it

Just add .sameline div {float: left;}.
(BTW, try to avoid posting PHP when asking CSS/HTML questions, as it makes it harder to read/interpret the code‚though not too difficult here. Get the HTML from your browser's source code, if necessary.)
Also note that sameline is a class, so this won't work unless you change the # to a .:
#sameline {
overflow: hidden;
white-space: nowrap;
}

if you add float: left; to .mbox and .hbox it should work.
Example here.

An additional background at bottom of page

I'm using Bootstrap to create my personal webpage, and i tried to add a gradient background to <body> but i ended up with a meaningless space of gradient there. Here is images, i can't include jsfiddle because i have more than one CSS files.
http://jsfiddle.net/eJ3CL/
You can't see the problem in jsfiddle since bootstrap is not included there, but here are the screenshots:
EDIT:
Edited Fiddle to include bootstrap and set height of content middle to 120px so that others can see the problem that OP wants to convey.
What is causing this? How can I fix this problem?
Edited: Here is all the relevant code.
<head>
<title>Burak Özmen - A Newbie Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container container-top">
<div class="page-header">
<h1>Burak Özmen <small>A Newbie Developer</small></h1>
</div>
</div>
<div class="container container-middle">
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>About Me</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="vertical-middle">In development... </div>
</div>
</body>
</html>
style.css:
body {
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
}
.container-middle {
height: 300px;
background: white;
}

Give a min-height to body
body {
min-height: 400px;
}

move the rules in body selector to html selector and add height:100%; rule to html selector.
html{
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
height: 100%;
}
.container-middle {
height: 300px;
background: white;
}
It works on Firefox, Chrome and IE9

Div going beyond the background color

What I want to do is that the background color will remain the same no matter how big the screen resolution is for the reader. I created a div where its height is set to auto.
.news-box{
margin-top:5%;
border-radius:6px;
background-color: #EEE;
border: 1px solid #EEE;
margin-left: 24%;
height:auto;
width:620px;
}
This how it looks like
And this my CSS rule for the whole html
I am using this body css rule. for my gradient
CSS RULE FOR THE WHOLE PAGE
html
{
height:100%;
}
THIS COMES BEFORE THE .news-box class
body
{
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 39%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
This how the page looks like without the Div
Any way to fix this?

Demo.....................................
Hey now used to min height 100% in you html and body as like this
html, body{
min-height:100%;
}
Demo