ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding fixed to the background seems to fix that - no need for height: 100%;
E.g.:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
I know I'm late to the party, but here's a more solid answer.
All you need to do is use min-height: 100%; rather than height: 100%; and your gradient background will extend the entire height of the content without repeating, even if the content is scrollable.
Like this:
html {
min-height: 100%;
}
body {
background: linear-gradient(#b5e48c, #457b9d);
}
There's a second solution though.
As others have said, adding the value fixed to the background declaration, will make the gradient extend the full height of the viewport.
Like this:
body {
background: linear-gradient(#b5e48c, #457b9d) fixed;
}
Granted, you still need to declare min-height: 100%; in the html.
Here's a demo in CodePen where you can play with both solutions: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100
Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}
<body>
<h1>Hello world!</h1>
</body>
I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.
Setting html { height: 100%} can wreak havoc with IE. Here's an example (png). But you know what works great? Just set your background on the <html> tag.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
Background extends to the bottom and no weird scrolling behavior occurs. You can skip all of the other fixes. And this is broadly supported. I haven't found a browser that doesn't let you apply a background to the html tag. It's perfectly valid CSS and has been for a while. :)
There is a lot of partial information on this page, but not a complete one. Here is what I do:
Create a gradient here: http://www.colorzilla.com/gradient-editor/
Set gradient on HTML instead of BODY.
Fix the background on HTML with "background-attachment: fixed;"
Turn off the top and bottom margins on BODY
(optional) I usually create a <DIV id='container'> that I put all of my content in
Here is an example:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}
This has been tested with IE, Chrome, and Firefox on pages of various sizes and scrolling needs.
Adding a space and the word fixed to the end should be sufficient. No need to set heights.
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.
I had trouble getting the answers in here to work.
I found it worked better to fix a full-size div in the body, give it a negative z-index, and attach the gradient to it.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>
Here's a full sample
https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
I have used this CSS code and it worked for me:
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
A related information is that you can create your own great gradients at http://www.colorzilla.com/gradient-editor/
/Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
this is what I did:
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}
before I floated the body, there was a gap on top, and it was showing the background color of html. if I remove the bgcolor of html, when I scroll down, the gradient is cut. so I floated the body and set it's position to relative and the width to 100%. it worked on safari, chrome, firefox, opera, internet expl.. oh wait. :P
what do you guys think?
instead of 100% i just add some pixxel got this now and it works for whole page without gap:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
Related
Ok so I am trying to set up my background image set up
So its like
<---Repeating image on the left --- Center image --- Repeating image on the right --->
The image on the left is not the same as the image on thie right.
I have tried using this
body{
background:
url(../Img/Background-01.png) center top no-repeat,
url(../Img/Background-02.png) right 0 repeat-x,
url(../Img/Background-03.png) left 0 repeat-x;
background-color:#232323;
}
But Background-02.png is overlapping Background-03.png resulting in Background-02.png repeating on both the left as well as the right side of the page when its only meant to be repeating on the right.
Here is a screen shot of my design it might give you a beter idear of what i am trying to make
the white boxes are parts of the background layer that are cropt out in there own image to be use on the website [img]http://s7.postimg.org/iy0tm6k2j/Screen_Shot_2014_06_27_at_5_16_13_pm.png[/img]
any help will be apreeseated to help fix this. Ok i worked it out this is what i used
'#Container{
position:relative;
width:1000px;
margin: 0 auto;
left: 0;
right: 0;
border:thin solid #000;
z-index:4;
}
#BGCont
{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 100%;
z-index:0;
height:500px;
}
#BGLeft
{
position:absolute;
width: 50%;
left: 0;
z-index:1;
background:url(../Img/Background-03.png) left 0 repeat-x;
height:500px;
}
#BGRight
{
position:absolute;
width: 50%;
z-index:2;
right: 0;
background:url(../Img/Background-02.png) right 0 repeat-x;
height:500px;
}
#BGCenter
{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 1200px;
z-index:3;
background:url(../Img/Background-01.png) center top no-repeat;
height:500px;
}'
Now my question is is this an ceptable way to do it or is it too messy?
Try to use before and after pseudo classes like below.
body
{
background: url(../Img/Background-01.png) center top no-repeat;
background-color:#232323;
}
body::before
{
background:url(../Img/Background-03.png) left 0 repeat-x;
}
body::after
{
background:url(../Img/Background-02.png) right 0 repeat-x;
}
By using repeat-x all you're doing is repeating it horizontally, on both left and right side. That's why the second image is overlapping the third one on the right. I suggest editing the image separately and then using it. As by this method you don't specify which side you want to repeat it on, but only the axis, i.e., x or y or horizontal or vertical
or you if you only want to extend it on either sides then you can use this:-
#leftHalf {
background: url(../Img/Background-03.png);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(../Img/Background-02.png);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
Also i had done something similar. I put a gray stop-marker on the left side, a white one on the right, and one of each right where you want the gray to end. In my example i put it at 40%.
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(top, #7a7a7a 0%, #a5a5a5 40%, #ffffff 40%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(40%,#a5a5a5), color-stop(40%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
As i understand, you want 3 images to show,
<---Repeating image on the left --- Center image --- Repeating image on the right --->
There are tow ways to set that,
1- Create divs and assign images to these divs
<--- left Div --- Center Div--- right Div --->
2- Create Tables and make 23 column
<--- C1--- C2--- C3 --->
How would I make the first vertical 5 pixels of a background colour blue in a div? So, in other words in the following example there would be a blue bar running across the top for 500 pixels that is 5 pixels high.
To be clear I have a special reason I can not use a border, etc (I wish it was that easy!)
This is what I have so far (link to fiddle here):
CSS:
.box {
height: 200px;
width: 500px;
background-color: red;
}
HTML:
<div class="box">
</div>
Box-shadow has slightly better browser support than gradients. So that's my method. Frankly, box-shadows are pretty awesome. You can do so many things with them to keep your markup clean.
box-shadow: inset 0px 5px 0 0 blue
-webkit-box-shadow: inset 0px 5px 0 0 blue
Use a CSS gradient.
jsFiddle example
.box {
height: 200px;
width: 500px;
background-color: red;
background: -moz-linear-gradient(top, #1e5799 5px, #ff0000 2%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5px,#1e5799), color-stop(2%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 5px,#ff0000 2%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ff0000',GradientType=0 ); /* IE6-9 */
}
I think I'd probably opt for a :before pseudo-element.
.box:before {
content: '';
width: 100%;
display: block;
height: 5px;
background: blue;
}
jsFiddle
Add a 5 pixel left-side border:
border-left: 5px solid blue;
The easiest way to do this without a border would probably be adding another div element.
HTML
<div class="box" id="other_box">
</div>
<div class="box">
</div>
CSS
.box {
height: 200px;
width: 500px;
background-color: red;
}
#other_box {
height: 5px;
background-color: blue;
}
And if you truly wanted it to be the first 5px of 200px main div, you can just change the height of the main div to 195px.
JSFiddle:
http://jsfiddle.net/jfJcU/3/
Or, you could wrap the new div within the main div:
http://jsfiddle.net/jfJcU/5/
The text is supposed to sit in the middle (vertically) on the navigation bar.
My code isn't working.
Can anyone explain why?
<style>
#navigationbar {
background: rgb(252,219,121);
background: -moz-linear-gradient(top, rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -o-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -ms-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: linear-gradient(to bottom, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
}
#logo {
color:white;
vertical-align:middle;
margin-left:10px;
}
* {
margin:0px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<div id='navigationbar'>
<a id='logo' href='http://localhost/'>WORK.</a>
</div>
vertical-align only works on elements with specific properties, generally with the CSS table display properties (table-cell, table, table-row and so forth).
However there is a simple way to vertically center things when you know the height of their container. Just add line-height: 40px to your #logo CSS (you could alternatively add it to the container, it makes no difference in this case).
#logo {
color:white;
line-height: 40px;
margin-left:10px;
}
If you wanted to use vertical-align, you would need to set display: table on the container (#navigationbar) and display: table-cell to your #logo that has vertical-align: middle. This will achieve the same effect.
You need to set the line height on the container for the vertical align to know what to be in the vertical middle of. See JSBIN demo
#navigationbar {
background: rgb(252,219,121);
background: -moz-linear-gradient(top, rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -o-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -ms-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: linear-gradient(to bottom, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
line-height:40px;
}
Add this to your current CSS (demo here):
#navigationbar {
width: 100%;
display: table;
}
#logo {
display: table-cell;
}
Like #Ennui said:
vertical-align only works on elements with specific properties, generally with the CSS table display properties (table-cell, table, table-row and so forth).
You could use line-height:33px; , but i also recommend wrapping your 'a tag' into a 'div tag' , so it will be easy to manipulate it later on. Example:
<style>
#logo {
width: 30px;
height: 40px;
margin-left: 10px;
}
#logo a{
color: white;
line-height: 33px;
}
</style>
<body>
<div id='navigationbar'>
<div id='logo'><a href='http://localhost/'>WORK.</a></div>
</div>
</body>
If you need to move that logo around later, it will be easy to just use absolute value on the #logo.
I have this very simply CSS code.
body {
background-color: #08407A;
min-width: 1000px;
height: 500px;
}
This one doesn't work in IE at all. The background is fully colored, but I need only background for 500px. I have tried all that background-cover, behavior. But it didn't work out for me.
You shouldn't be using the body as fixed width container.
Limiting the width of body doesn't make sense, as it represents the entire browser window.
Instead, try using a block element, such as a <div> to achieve your results.
HTML:
<div class="myDiv">
This is my content
</div>
CSS:
.myDiv { background-color:#08407A; min-width:1000px; height:500px; }
Working directly with body isn't good idea. Instead, use an element:
HTML
<body>
<div id="bg"></div>
<div id="wrapper">
HTML DATA
</div>
</body>
CSS
#bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 500px;
background-color: #08407A;
}
#wrapper {
position: relative;
}
Check this FIDDLE DEMO.
It will not work like that.
Whatever colour you give for body will be shown across the page. To show color only for 500px you need to add a div with height 500px and give background color to it.
But if you don't want to use a div and you are using a modern browser you can try something like this using background style
http://jsfiddle.net/hZfJJ/1/
body {
background: -moz-linear-gradient(top, rgba(255,61,61,1) 0%, rgba(255,61,61,1) 40%, rgba(255,255,255,1) 40%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,61,61,1)), color-stop(40%,rgba(255,61,61,1)), color-stop(40%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background-repeat : no-repeat;
height:100%;
}
html {
height: 100%;
}
I'm having a bit of an issue with IE9 and just can't figure it out, I'm creating a button in CSS with a linear gradient, it displays perfectly in Chorme, Firefox and Safari but just not in IE9
http://ubizzo.co.uk/img/ie9.png
http://ubizzo.co.uk/img/ch-fi-sa.png
First image link is IE9, second image link is every other browser, the only way I can get it work is if I add float:left or float:right in the css as below but then that obviously screws up the layout, I've tried to use float:none but that doesn't work either, I've tried this in a blank html file just to rule out any conflicting css but still doesn't work :-s
.purchase {
margin-top: 5px;
display: block;
width: auto;
}
.purchase a {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 10px;
cursor: pointer;
border: none;
color: #fff;
line-height: 1em;
width: auto;
**float: left;**
border-image: initial;
text-align: center;
border: solid 1px #189199;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}
.purchase a:hover {
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');
color: #ffffff;
}
Thanks for any help,
Adam.
http://jsfiddle.net/gdmP8/ - notice that the button only displays once you've addded float:left/right
apply this css thi will work in all browser i have check in chrome, Firefox, safari, opera, ie-7, ie-8, ie-9
background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top, #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */
You'll have this same problem in Opera, why don't you just stick to a simple button image rollover for IE?
Float problems in IE 9 are usually due to a bad header. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Taken from IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
(not sure if duplicate)
And you probably should use the now standard linear-gradient (or at least -ms-linear-gradient and -o-linear-gradient instead of just using moz and webkit specific gradients).