nav button size changing in different browsers - html

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.

Related

CSS3 Gradient doesn't work as a background

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>

css how to center this content

I have made a fiddle for my problem.
This is it
http://jsfiddle.net/8Kx8c/
This is the result of my code:
I need to do two things:
First, center all the content inside the div with the border. I mean this div <div id="agentsLegend">
Second, center the text to be in the center of the circle. the text exist in this code:
<span class="oneLegend">
<div class="breakLegend oneAgentLegent"></div>
Break
</span>
I tried:
text-align:center;
vertical-align:middle;
but the content is not centered.

you need to set vertical-align to .oneAgentLegent as well.
And eventually set a line-height to #agentsLegend.
DEMO
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:30px;/* tune baseline height here */
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
display:inline-block;
vertical-align:middle;/* make this to vertical-align:middle to text aside */
}
To center your inline-boxe: use text-align:center on parent.
DEMO 2
body {
text-align:center;/* parent of your box in fiddle demo */
}
edit , if you want to use display:table instead, add display:table-cell to span , so it easily vertical center content : http://jsfiddle.net/8Kx8c/9/

I've done a few changes to the css. These should help you fix your issue.
Reduced the height and added padding top to #agentsLegend element.
height:28px; padding-top:9px;
Changed vertical-align:middle; to vertical-align:top; in .oneLegend element.
Added line-height: 20px; to .oneLeged element.
FIDDLE

You can accomplish this by using a combination of vertical-align on the children with line-height set on the parent for the vertical aligning, and setting display:table; and margin:0 auto on the parent to center horizontally.
Demo Fiddle
CSS
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
line-height:38px;/* <-- vertical alignment */
padding-left:5px;
padding-right:5px;
display:table; /* <-- horizontal alignment */
margin:0 auto; /* <-- horizontal alignment */
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;/* <-- vertical alignment */
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
vertical-align:-10%;/* <-- vertical alignment */
display:inline-block;
}
.agent-table-wrap td.breakAgentClass, .breakLegend {
background: #6b4e30;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNGUzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTg5NzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6b4e30), color-stop(100%, #998972));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6b4e30 0%, #998972 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4e30', endColorstr='#998972', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.idelAgentClass, .idelLegent {
background: #fcda19;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZGExOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcda19), color-stop(100%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* IE10+ */
background: linear-gradient(to bottom, #fcda19 0%, #ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcda19', endColorstr='#ffffff', GradientType=0);
/* IE6-8 */
color: #333;
}
.agent-table-wrap td.pauseAgentClass, .pauseLegend {
background: #1283b7;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyODNiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYWQxZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1283b7), color-stop(100%, #bad1e2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1283b7 0%, #bad1e2 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1283b7', endColorstr='#bad1e2', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.talkingAgentClass, .talkingLegend {
background: #4ea51c;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYTUxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWU1NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ea51c), color-stop(100%, #aae579));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* IE10+ */
background: linear-gradient(to bottom, #4ea51c 0%, #aae579 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ea51c', endColorstr='#aae579', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.voicemailAgentClass, .voiceMailLegend {
background: #8a38aa;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzhhMzhhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYjk1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #8a38aa), color-stop(100%, #db95f4));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* IE10+ */
background: linear-gradient(to bottom, #8a38aa 4%, #db95f4 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a38aa', endColorstr='#db95f4', GradientType=0);
/* IE6-8 */
color: #fff;
}

You can change some properties like :
#agentsLegend {
display: table;
}
.oneLegend {
display:table-cell;
}
http://jsfiddle.net/8Kx8c/1

You need to add only line-height:38px; on #agentsLegend and vertical-align:middle; on class oneLegend
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:38px; /*Addded line*/
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle; /*Addded line*/
}
Here is the Fiddle link.

http://jsfiddle.net/DUgKb/19/
You cannot have a span wrapping a div. It was not working since a span is not a block element.
Add a wrapping div to center everything.
.center {
text-align: center;
}
vertical align the icons
#agentsLegend {
display: inline-block;
padding: 5px;
}
.oneAgentLegent, .oneLegend {
display: inline-block;
vertical-align: middle;
}

Position left sidebar with CSS

I am trying to design a layout with a left sidebar and a centered header. I have the header and sidebar in a wrapper div so that they can be centered on the page, but I want the sidebar to be a little left of the header like in this screenshot
How can I achieve this? Right now, when I re-size the window, the sidebar won't follow the header. Any help would be appreciated, I am still learning CSS. Thanks.
Here is my HTML and CSS (note: I had a margin: 0 auto 0 15px for the nav but took it out):
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
</ul>
</nav>
</div>
body {
margin:0;
padding: 5px;
background-color: #121212;
}
#wrapper {
margin:0 auto 0 auto;
width:1024;
}
header {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width: 768px;
height:100px;
border-radius: 4px;
border: 2px solid #adadad;
margin:0 auto 0 auto;
}
nav {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width:230px;
height:235px;
border-radius: 4px;
border: 2px solid #adadad;
}

Here you go: http://jsfiddle.net/WMYmV/1/
Changed style:
header {
width: 538px; //(768px - width of sidebar)
margin: 0 auto 0 230px;
}

IE9 Gradient isnt showing up

I am having an issue with a CSS gradient in IE9. I am about ready to just do it with an image... UGGHHH moving backwards i guess.
I used this site http://www.colorzilla.com/gradient-editor/ to create my gradient and it says that IE6-9 support uses this...
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
But it isnt showing up in IE9
Here is my entire CSS entry
.orangeButton {
width: 170px;
height: 20px;
padding: 3px 20px;
text-align: center;
color: #fff;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #ff4e00;
text-decoration: none;
background: #ffa70f; /* Old browsers */
background: -moz-linear-gradient(top, #ffa70f 1%, #ff810f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffa70f), color-stop(100%,#ff810f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa70f 1%,#ff810f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa70f', endColorstr='#ff810f',GradientType=0 ); /* IE6-9 */
}
Is there another way to do this that is missing from Color Zilla. I have read places that you can use background-image does this work better for IE9 and before?

Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

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/