CSS3 Gradient doesn't work as a background - html

I have a problem, I can't set gradient as a background of my website(gradient from http://www.colorzilla.com/gradient-editor/), and when run it in browser, background is just white. Even if I just set background: #171717; there is black background, but when i add gradient code it just white.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXXXXXXXXXXXXX</title>
<style type="text/css">
asdasd
body {
background: #171717;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTMzNzYxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(100%,#133761)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#133761 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%,#133761 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#133761',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
margin: 0;
font-family: 'Arial';
}
#menu{
font-size: 24px;
color: #BEABD6;
height: 28px;
}
a{
padding: 12px 24px;
text-decoration: none;
text-align: center;
}
div {
width: 598px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="menu">
XXXXXXX
XXXXXXX
XXXXXXXXX
</div>
</body>
</html>


The solution is very simple: remove the asdasd in front of your body {.
Side-note: The solution provided by Paulie_D is not necessary to solve your problem.


The code works fine....except you have to remove the zero margin from the body
body {
background: #171717;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTMzNzYxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #000000), color-stop(100%, #133761));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%, #133761 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%, #133761 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#133761', GradientType=1);
/* IE6-8 fallback on horizontal gradient */
background: radial-gradient(ellipse at center, #000000 0%, #133761 100%);
}
#menu {
font-size: 24px;
color: #BEABD6;
height: 28px;
}
a {
padding: 12px 24px;
text-decoration: none;
text-align: center;
}
div {
width: 598px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="menu">
XXXXXXX
XXXXXXX
XXXXXXXXX
</div>

Related

Make 4 cells with divisor

How can I make these divisors of a simplest box. I have this simple box html and css.
HTML code is:
<div id="box"></div>
and CSS code of box is:
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
}
OK. Let's go to divisor... how can i do them? Image linked is here:
Thanks

A couple of pseudo-elements overlaid on top might work:
body {
background: #c0ffee;
}
#box {
width: 350px;
height: 200px;
margin: 2em auto;
border-radius: 5px;
/* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
position: relative;
}
#box::before,
#box::after {
content: '';
position: absolute;
}
#box::before {
width: 100%;
top: 50%;
left: 0;
margin-top: -3px;
height: 4px;
background: linear-gradient(to bottom, white, lightgrey);
border-radius: 2px;
z-index: 1;
}
#box::after {
width: 4px;
top: 0%;
left: 50%;
margin-left: -3px;
height: 100%;
background: linear-gradient(to left, white, lightgrey);
border-radius: 3px;
z-index: 2;
}
<div id="box"></div>

You are either going to need to insert a background image with the lines on the image or create sections within the box and styling the box based on where it is located in the main box.
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
font-size:0px;
}
.section{
width:49.25%;
height:49%;
margin:0px;
padding:0px;
display:inline-block;
}
#top-left{
border-bottom:5px solid white;
border-right:5px solid white;
}
#top-right{
border-bottom:5px solid white;
}
#bottom-left{
border-right:5px solid white;
}
<div id="box">
<div class="section" id="top-left"></div>
<div class="section" id="top-right"></div>
<div class="section" id="bottom-left"></div>
<div class="section" id="bottom-right"></div>
</div>

img on submit button - that is responsive

I want this
on a submit button so I gave it as a background.
I'm doing the page responsive so I gave it the next css :
#button1{
background: url('../images/button1.png') no-repeat;
margin-top:-270px;
padding-bottom: 10px;
padding-right: 2%;
width: 25%;
position:relative;
right:2.5%;
}
but when the page get smaller the image get cut.
How can I solve this problem?

If you have or can get/crop out the arrow and the barcode separately as transparent PNGs or GIFs, you can do this:
#button1 {
background: rgba(204,204,204,1);/* Old Browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(100%, rgba(102,102,102,1)));/* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* IE 10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%);/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#666666', GradientType=0 );/* IE6-9 */
position: relative;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#button1:after,
#button1:before {
display: inline-block;
content: url('img/button-barcode.png');
margin: .5em;
vertical-align: middle;
}
#button1:before {
content: url('img/button-arrow.png');
}
The code employs pseudo elements ::before and ::after to put the arrow and the barcode into the <button> and the button will be responsive that way.
P.S. Works only on <button> tags, not on the button type of <input>!

Gradient over img tag using css

I want to place a gradient over an <img> tag. src attribute of the tag is angular-item. For example:
<img src={{value.angitem.image}}>
I've tried to make css class:
.pickgradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
}
and
<img src={{value.angitem.image}} class="pickgradient ">
but it doesn't work. What should I do?

With z-index :
You may use a container and put the gradient on that container. Then use a negative z-index to position image behind the gradient.
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>
With a pseudo element :
As commented, you can also use a pseudo element with the gradient and absolute positioning to put the gradient over the image :
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
display:block;
height:200px;width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>

For 2020, mask-image can work well. It works in modern browsers (not IE, -webkit- prefix in many browsers currently). https://caniuse.com/#feat=css-masks
img {
height: 200px;
width: auto;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
<img src="http://i.imgur.com/HDssntn.jpg" />

I recommend you to set background-color:black; to your container and then set class img{opacity:0.4}. Then you will get the same effect as you got with
backgroundImage:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img_url))
My example on Slide:
.Slide {
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
background-color: rgb(0, 0, 0);
}
.Slide img{
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
opacity: 0.4;
}

try placing a div over the image in question and placing the gradient on the div instead of the image.

CSS Background Color not Scaling ASP.NET

I have a master page with some CSS for a background and am also using a another div to give a content box around what I wish to place on the page. However when I scale the content div to say 1000px the background div doesn't seem to see that I've expanded the content div beyond what it's current height is. Anyone have any ideas on this? I was thinking it had to do with the master page content controls but am not sure.
Some of what I have here has been me playing with it. For example the content box I hardcoded to a height of 100% but it won't have that as I want the content box to expand based on its content. But the hardcoded height allowed me to show the fact of how the background is not sizing with the content.
Here is the code:
CSS:
body
{
border: 0px none;
margin: 0px;
padding: 0px;
}
.Button
{
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
color:White;
border-style: solid;
border-width: thin;
border-color: Black;
display: block;
width: 100px;
height: 25px;
margin: 0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
background: rgb(208,228,247); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(208,228,247,1) 0%, rgba(115,177,231,1)
24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.Button:hover
{
background: rgb(247,208,228); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(135,188,234,1) 0%, rgba(208,228,247,1) 24%, rgba(115,177,231,1) 50%, rgba(10,119,213,1) 79%, rgba(83,159,225,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(135,188,234,1)), color-stop(24%,rgba(208,228,247,1)), color-stop(50%,rgba(115,177,231,1)), color-stop(79%,rgba(10,119,213,1)), color-stop(100%,rgba(83,159,225,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(135,188,234,1) 0%,rgba(208,228,247,1) 24%,rgba(115,177,231,1) 50%,rgba(10,119,213,1) 79%,rgba(83,159,225,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(135,188,234,1) 0%,rgba(208,228,247,1) 24%,rgba(115,177,231,1) 50%,rgba(10,119,213,1) 79%,rgba(83,159,225,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(135,188,234,1) 0%,rgba(208,228,247,1) 24%,rgba(115,177,231,1) 50%,rgba(10,119,213,1) 79%,rgba(83,159,225,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(135,188,234,1) 0%,rgba(208,228,247,1) 24%,rgba(115,177,231,1) 50%,rgba(10,119,213,1) 79%,rgba(83,159,225,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87bcea', endColorstr='#d0e4f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.Button:active
{
position: relative;
top: 1px;
}
/*Login Page */
#LoginBox
{
position: absolute;
min-height: 1px;
height: 300px;
width: 300px;
top: 50%;
left: 50%;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border: 1px solid;
text-align:center;
border-radius: 25px;
margin:-150px 0 0 -150px;
background: #88bfe8; /* Old browsers */
background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(100%,#70b0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 ); /* IE6-9 */
}
.LoginControls
{
width: 200px;
height:100px;
margin:-50px 0 0 -100px;
top: 50%;
left:50%;
position:absolute;
}
.WelcomeLabel
{
top:15%;
left:50%;
margin:-25px 0 0 -50px;
position:absolute;
width:100px;
height:50px;
}
/*Data Entry Page */
#DataEntryContent
{
position: absolute;
min-height: 1px;
height: 1000px;
width: 1000px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border: 1px solid;
margin: 10px;
text-align:center;
border-radius: 25px;
background: #88bfe8; /* Old browsers */
background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(100%,#70b0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 ); /* IE6-9 */
}
/*General */
.ContentBackground
{
width: 100%;
height: 100%;
display: inline-block;
min-height: 1px;
position: absolute;
background: rgb(59,103,158); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.Line
{
clear:both;
width:100%;
min-height:1px;
background-color:#d1d1d1;
height:1px;
margin-top:10px;
margin-bottom:10px;
}
.Labels
{
font-size: large;
font-weight: bold;
}
.clear
{
clear: both;
}
.TextBoxes
{
font-size: large;
font-weight: bold;
}
.ContentBox
{
position: absolute;
display: inline-block;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
height: 1000px;
border: 1px solid;
text-align:center;
border-radius: 10px;
padding: 10px;
background: #88bfe8; /* Old browsers */
background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(100%,#70b0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 ); /* IE6-9 */
}
#BannerImage
{
width: 297px;
height: 59px;
}
ul, li{margin:0; padding:0; list-style:none;}
.menu_head{border:1px solid #998675;}
.menu_body {width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
ASP Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MyProject.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>MyProject Web</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" href="~/Styles/superfish.css" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="../Scripts/superfish.js"></script>
<script type="text/javascript" src="../Scripts/SiteMaster.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
</div>
<div class="Banner">
<img id="BannerImage" alt="Logo" src="/images/Logo.gif" />
<ul class="sf-menu">
<!--List for Javascript Menu -->
</ul>
</div>
</div>
<div class="ContentBackground">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="clear">Test</div>
<div class="footer">
Footer
</div>
</form>
</body>
</html>
Page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Entry.aspx.cs" Inherits="MyProject.Entry.Entry" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="ContentBox">
Test
</div>
</asp:Content>

It looks like the issue you are running into is mainly caused by the child element (ContentBox) and parent element (ContentBackground) in your stylesheet both having absolute positioning.
If you edit your css slightly, it should correct your problem.
Remove height: 100%; and position: absolute; from .ContentBackground
and
Remove position: absolute; from .ContentBox
Here is an article that may help you learn more about positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/

nav button size changing in different browsers

I'm trying to make a navbar with a gradient and top and bottom borders. Trying it on different browsers results in slightly different sizes which break the layout by 1px. Is there a better way to do this?
Here's the HTML:
<head>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body>
<header>
<h1>Page Title</h1>
</header>
<div id="navbar" class="gradient">
<ul>
<li> Link 1 </li>
<li> Link 2 </li>
<li> Link 3 </li>
<li> Link 4 </li>
<li> Link 5 </li>
<li> Link 6 </li>
<li> Link 7 </li>
</ul>
</div>
</body>
And the CSS:
html, button, input, select, textarea {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: #222;
}
body {
margin: 0;
font-size: 1em;
line-height: 1.4;
}
header {
background-color: #fcfcfc;
}
h1 {
padding: 10px;
width: 968px;
margin: auto;
font-family: "Times", "Times New Roman", "serif";
font-style: italic;
}
#navbar {
padding: 0;
margin: 0;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
background-color: #fff;
height: 31px;
font-size: 14px;
-webkit-text-size-adjust: 14px;
-ms-text-size-adjust: 14px;
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
}
ul {
margin: 0 auto;
padding: 0;
width: 968px;
list-style-type: none;
}
li {
/* width: 138px;*/
display: inline;
padding: 6px 0;
float: left;
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
}
li:hover {
background: #ededed; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ededed 0%, #f6f6f6 53%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(53%,#f6f6f6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ededed 0%,#f6f6f6 53%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
li a {
color: #000;
text-decoration: none;
padding: 6px 32px;
}

To be completely honest, welcome to the wonderful world of Web Development. I would suggest creating a separate CSS file for each browser (Or at least IE), that way you can tweak the CSS to conform to your vision.
Get your Navbar looking good in say, Firefox/Chrome, then move on to tweaking a separate style-sheet for use with IE.
For example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ieisterrible.css" />
<![endif]-->

You have to understand that CSS 3 gradients won't behave equally in different browsers. You may generate a gradient using Ultimate CSS Gradient Generator which generates gradient for cross browser support. Even then, you can notice some color and behavior changes according to browser. In this case, I strongly recommend you to;
Make a nav-bar like rectangle in some image editor like Photoshop.
After applying the gradient, you may re-size the width to 1 px (height is not a problem)
You may then apply this image to your navbar using CSS like
background: #color_code gradient_image repeat-x
Since the image is just 1px wide, the size will be less and will load comparatively faster.