Page 1 of 1

Gradient using divs?

Posted: Fri Jul 20, 2007 8:50 pm
by toasty2
Why does nothing show up with this html?:

Code: Select all

<div style="width:200px;height:2px;position:absolute;left:5px;top:0px;background:gray0;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:1px;background:gray1;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:2px;background:gray2;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:3px;background:gray3;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:4px;background:gray4;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:5px;background:gray5;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:6px;background:gray6;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:7px;background:gray7;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:8px;background:gray8;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:9px;background:gray9;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:10px;background:gray10;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:11px;background:gray11;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:12px;background:gray12;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:13px;background:gray13;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:14px;background:gray14;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:15px;background:gray15;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:16px;background:gray16;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:17px;background:gray17;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:18px;background:gray18;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:19px;background:gray19;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:20px;background:gray20;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:21px;background:gray21;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:22px;background:gray22;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:23px;background:gray23;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:24px;background:gray24;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:25px;background:gray25;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:26px;background:gray26;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:27px;background:gray27;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:28px;background:gray28;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:29px;background:gray29;"></div>
<div style="width:200px;height:2px;position:absolute;left:5px;top:30px;background:gray30;"></div>
etc...
(I generated that with a script)

Posted: Fri Jul 20, 2007 8:52 pm
by feyd
No content.

Posted: Fri Jul 20, 2007 8:54 pm
by toasty2
But shouldn't the divs' backgrounds show up? I gave them width and height. Putting a space in them didn't help either.

Posted: Fri Jul 20, 2007 9:23 pm
by feyd
The current settings you've given them will cause them to automatically collapse if there is no content in them. If, for example you placed a border on them, they would not collapse, if memory serves.

Posted: Fri Jul 20, 2007 9:43 pm
by toasty2
Then what should I do? I'm open to other alternatives for making a image-less gradient.

Posted: Fri Jul 20, 2007 9:53 pm
by feyd