href refer to link with file-protocol - html

I would refer to a link on a intern file-server which have an html file.
My Code looks like this:
<a href="file://///192.168.115.203/fileserver/v_collection/search.html" target="_blank">
<table class="linkTable">
<tr class="linkTableLine">
<td class="linkTxtCell">Icon Experience V-Collection</td>
</tr>
</table>
</a>
The server is reachable in our intern network and if i copy the link and insert it in the browser-bar it works.
But if i click the button in my HTML-File it do nothing. I try it in Chrome, Mozilla and in in IE.
After search I found some old threads, that come to the end, that the browser wouldn´t open local files because of security guidelines.
But in my way it is only show a html file from a other server. The HTML-File can´t be copy to the html-server because there a much more files to search in it.
Can i fix my problem or is it unfixable ?
Edit:
I try to test the code and it works. But in my php-created site it wont work. I will give you the whole table:
<table class="links" cellspacing="5px">
<tr>
<td class="link">
<a href="file://///192.168.115.203/fileserver/Icons/IconExperience/v_collection/search.html" target="_blank"><table class="linkTable">
<tr class="linkTableLine">
<td class="linkTxtCell">
Icon Experience V-Collection
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
and the css:
.link {
font-weight: normal;
border-width: 1px;
border-style: solid;
border-color: #303030;
max-height: 23px;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe
100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2),
color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1),
color-stop(100%, #fefefe) ); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%,
#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe
100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe
100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe', GradientType=0 ); /* IE6-9 */
}
.link:hover {
background: rgb(230, 240, 163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(230, 240, 163, 1) 0%,
rgba(210, 230, 56, 1) 50%, rgba(195, 216, 37, 1) 51%,
rgba(219, 240, 67, 1) 100% ); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230,
240, 163, 1) ), color-stop(50%, rgba(210, 230, 56, 1) ),
color-stop(51%, rgba(195, 216, 37, 1) ),
color-stop(100%, rgba(219, 240, 67, 1) ) ); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(230, 240, 163, 1) 0%,
rgba(210, 230, 56, 1) 50%, rgba(195, 216, 37, 1) 51%,
rgba(219, 240, 67, 1) 100% ); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(230, 240, 163, 1) 0%,
rgba(210, 230, 56, 1) 50%, rgba(195, 216, 37, 1) 51%,
rgba(219, 240, 67, 1) 100% ); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(230, 240, 163, 1) 0%,
rgba(210, 230, 56, 1) 50%, rgba(195, 216, 37, 1) 51%,
rgba(219, 240, 67, 1) 100% ); /* IE10+ */
background: linear-gradient(to bottom, rgba(230, 240, 163, 1) 0%,
rgba(210, 230, 56, 1) 50%, rgba(195, 216, 37, 1) 51%,
rgba(219, 240, 67, 1) 100% ); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#e6f0a3', endColorstr='#dbf043', GradientType=0 );
/* IE6-9 */
}
table.linkTable {
width: 100%;
}

I think it is not possible because of browser security settings.

Related

How can I make a nice yellow button with text shadow?

I almost have a nice blue button but I want the background yellow and I want the text in center.
#post3 {
width: 450px;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */
/*display: inline-block;*/
border: 1px solid rgb(0, 0, 0);
/*width: 290px;*/
height: 45px;/*
font-size: 150%;*/
text-decoration: none;
/*text-align: center;*/
color: rgb(255, 255, 255);
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
}
<div id="post3"> Loren Ipsum</div>
Can you please help me? I don't know how to center the text and I don't know how to apply a text shadow.
Check this out:
Demo
background-image: -webkit-linear-gradient(top, rgb(242, 227, 109) 0%, rgb(219, 238, 84) 50%, rgb(240, 231, 54) 51%, rgb(222, 222, 30) 100%);
width:450px; /*It was width=450px; */
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#post3 {
background: #ffcf32; /* Old browsers */
background: -moz-linear-gradient(top, #ffcf32 0%, #ffff30 50%, #f7df27 51%, #ffdf89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcf32), color-stop(50%,#ffff30), color-stop(51%,#f7df27), color-stop(100%,#ffdf89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcf32', endColorstr='#ffdf89',GradientType=0 ); /* IE6-9 */
/*display: inline-block;*/
border: 1px solid rgb(0, 0, 0);
/*width: 290px;*/
height: 45px;/*
font-size: 150%;*/
text-decoration: none;
/*text-align: center;*/
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
width: 300px;
text-align: center;
}
span.center-content {
display: inline-block;
vertical-align: middle;
line-height:45px;
}
#post3 a {
color: #fff;
font-size: 24px;
letter-spacing: 2px;
text-decoration: none;
text-shadow: 2px 3px 7px #000000;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="post3"><span class="center-content">Loren Ipsum</span></div>
</body>
</html>
Just copy and paste the code above you should see the yellow colored button with gradient effect. Have a look at the URL http://www.colorzilla.com/gradient-editor/#ffcf32+0,ffff30+50,f7df27+51,ffdf89+100;Custom for creating the gradients on the fly.
This code coveres
Yellow gradient
Horizontally and vertically centered text
Shadow effect for the text on the button

Increase menu width to page size

I'm trying to create a menu which stretches across the page. However, it's not stretching across the screen, even when I make the width 100%.
Here's my code:
select {
display: none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height: 70px;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148, 148, 149, 1);
background: -moz-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 148, 149, 1)), color-stop(36%, rgba(192, 192, 192, 1)), color-stop(100%, rgba(192, 192, 192, 1)));
background: -webkit-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -o-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -ms-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: linear-gradient(to bottom, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0);
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
color: #000;
text-decoration: none;
}
nav ul li~li {
border-left: 1px solid #857D7A;
}
nav .active a {
background: rgba(180, 85, 12, 1);
background: -moz-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180, 85, 12, 1)), color-stop(36%, rgba(234, 110, 16, 1)), color-stop(100%, rgba(234, 110, 16, 1)));
background: -webkit-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -o-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -ms-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: linear-gradient(to bottom, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0);
color: #fff;
}
#media (max-width: 480px) {
select {
display: block;
width: 200px;
margin: 0 auto;
}
nav {
display: none;
}
}
<nav>
<ul>
<li class="active">Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
</li>
<li>Item 5
</li>
</ul>
</nav>
<select>
<option value="#">Item 1</option>
<option value="#">Item 2</option>
<option value="#">Item 3</option>
<option value="#">Item 4</option>
<option value="#">Item 5</option>
</select>
You just need to add width: 100%; to your nav ul like this:
nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}
If you want the buttons to expand, you need to use display: table; on the nav ul followed by display: table-cell; on the nav ul li
Here is a fiddle for you showing it working - http://jsfiddle.net/andyjh07/Ldu3o1jm/
Check this Codepan. You need to change this.
nav ul
{
width:100%
}

CSS issue with background button [duplicate]

This question already has answers here:
How do I combine a background-image and CSS3 gradient on the same element?
(20 answers)
Closed 8 years ago.
I have a button, that has a gradient on it. I also needs an image arrow on it, but when I put it to background, and a button with two classes it seems not to work. Below is an example:
<button class="btn btn-wide">Load more</button>
.btn{
background: rgb(0,166,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6ff', endColorstr='#029aec',GradientType=0 ); /* IE6-9 */
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
}
.btn-wide{
width:728px;
height:45px;
background-image: url('images/white-arrow-down.png') no-repeat;
background-position: 50% 50%;
}
The background at the class .btn-wide is getting ignored because of the .btn class I guess.
What would be the best markup solution in this example? :)
Jsfiddle
The issue is that you are using the background shorthand property so trying to apply a second background image merely overwrites the previous statement (the gradient).
You can use comma separated background image statements like this.
CSS
.btn{
background-image: /* note bg image */
url(http://lorempixel.com/output/abstract-q-c-32-32-2.jpg),
linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
background-repeat:no-repeat;
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
background-position:50% 50%;
}
.btn-wide{
width:728px;
height:45px;
}
JSFiddle Demo
Find the following link for updated fiddle.
FIDDLE
I updated the css.
.btn{
background: rgb(0,166,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6ff', endColorstr='#029aec',GradientType=0 ); /* IE6-9 */
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
position:relative;
width:728px;
height:45px;
}
.btn div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
background-position: right;
background-repeat:no-repeat;
background-size:32px 32px;
}
Change the arrow image path according to your image.
The problem is with this rule
background-image: url('images/white-arrow-down.png') no-repeat;
you're specifying repeat in background-image.
You can rewrite it as
background-image: url('images/white-arrow-down.png');
background-repeat: no-repeat;
Update:
Fixing actual issue in your CSS doesn't provide you with your desired results because backgorund-image is going to overwrite the gradient. You can add position: relative .btn, remove background from .btn-wide, and use :before pseudo selector to add an element to your button. Following is the CSS
.btn{
background: rgb(0, 166, 255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 166, 255, 1)), color-stop(50%, rgba(0, 166, 255, 1)), color-stop(53%, rgba(2, 154, 236, 1)), color-stop(100%, rgba(2, 154, 236, 1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a6ff', endColorstr='#029aec', GradientType=0); /* IE6-9 */
border: 0px;
color: white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
position: relative;;
}
.btn-wide{
width: 728px;
height: 45px;
}
.btn-wide:before{
content: ' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
background: url('images/white-arrow-down.png') no-repeat 50% 50%;
top: 0;
left: 0;
}

CSS: How to style table background including the <caption> element

Stylesheets for tables elements exclude the table caption (a <caption> tag inside the <table> tag).
Is there a way for a table to have a gradiented background that includes the caption ?
Adding display:block; should solve it
<style>
table{
background-image: -moz-linear-gradient(bottom, rgb(156,155,250) 43%, rgb(255,255,255) 88%);
display:block;
}
<table>
<caption>Test</caption>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
Yes, there is: http://jsfiddle.net/Pe5Lt/2/
Position the caption absolutely, relatively to the table, then give the table some padding-top and center the caption with margin: Xpx auto;:
HTML
<table>
<caption>I'm a CAPTION</caption>
<thead>
<tr>
<th>I'm a TH</th>
</tr>
</thead>
<tbody>
<tr>
<td>I'm a TD</td>
</tr>
</tbody>
</table>
CSS
table {
position: relative;
padding-top: 30px;
width: 200px;
border: 1px solid red;
background: rgb(30, 87, 153);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 66%, rgba(32, 124, 202, 1) 100%, rgba(125, 185, 232, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(66%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 66%, rgba(32, 124, 202, 1) 100%, rgba(125, 185, 232, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 66%, rgba(32, 124, 202, 1) 100%, rgba(125, 185, 232, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 66%, rgba(32, 124, 202, 1) 100%, rgba(125, 185, 232, 1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 66%, rgba(32, 124, 202, 1) 100%, rgba(125, 185, 232, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
}
table caption {
color: red;
position: absolute;
top: 0;
width: 100%;
margin: 10px auto;
}
CSS Gradient background generated with http://www.colorzilla.com/gradient-editor/

Nonrepeating gradient that fits the whole page

I'm currently trying to make a background for the website I'm designing that is a gradient all the way to the bottom of the page but currently it repeats every time it gets to the bottom of my screen. I'm using the code:
html {
height: 2520;
}
body {
height: 2500px;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -ms-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -o-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), color-stop(0.3, #a6f2c0), color-stop(0.65, rgba(180, 200, 210, .9)), to(black));
background: -webkit-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
}
and I'm wondering if making a gradient never repeat is impossible. Please let me know if it can be done and if so how it can be done. Thank you in advance!
You had no px on your html size. But you should do it like this. FIDDLE HERE
HTML
<html><body>
<div class="main-content-wrapper">
ALL OF YOUR CONTENT
</div>
</body></html>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.main-content-wrapper {
min-height: 2520px; /* remove this. let the content decide this height */
background: #ea2e9c;
background: -moz-linear-gradient(top, #ea2e9c 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea2e9c), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #ea2e9c 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e9c', endColorstr='#7db9e8',GradientType=0 );
e background-image(linear-gradient(top, #ea2e9c 0%,#7db9e8 100%));
}