I out some time into coding a few thing onto my boards, but cant handle a simple gradient overlay.

Anyhow my code for my stylsheet looks like :

<STYLE TYPE='text/css'>
A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}

BODY, TD {
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.PlainText {
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.MainTable {
background-color: #cccccc;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.MainMenuRowAlt {
background-color: transparent;
font-family: tahoma,arial,sans-serif;
font-weight: bold;
font-size: 9pt;
color: yellow;
text-decoration: none;
}

.MainMenuRow {
background-color: #666666;
font-family: tahoma,arial,sans-serif;
font-weight: normal;
font-size: 9pt;
color: white;
text-decoration: none;
}

.MainMenuLink {
background-color: transparent;
font-family: tahoma,arial,sans-serif;
font-weight: bold;
font-size: 9pt;
color: white;
text-decoration: none;
}

.MainMenuLinkLight {
background-color: transparent;
font-family: tahoma,arial,sans-serif;
font-weight: bold;
font-size: 9pt;
color: #CCCCFF;
text-decoration: none;
}

.BoardColumn {
background-color: #999999;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: white;
text-decoration: none;
}

.BoardColumnLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: white;
text-decoration: none;
}

.BoardRowHeading {
background-color: #b1b3bc;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.BoardRowHeadingLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

.BoardRowBody {
background-color: #c1c2c9;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.BoardRowBodySticky {
background-color: #B1B2B9;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: black;
text-decoration: none;
}

.BoardRowBodyLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

.SubjectLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

a.SubjectLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

a.SubjectLink:active {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

a.SubjectLink:visited {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 10pt;
color: #000099;
text-decoration: none;
}

.AuthorLink {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
color: #000099;
text-decoration: none;
}

.AuthorLinkSmall {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 8pt;
color: #000099;
text-decoration: none;
}

.VersionText {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 8pt;
color: #777777;
text-decoration: none;
}

.InputSection {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 10pt;
color: black;
text-decoration: none;
}

.InputNotes {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 9pt;
color: maroon;
text-decoration: none;

width: 65%;
}

.SignatureTitle {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 9pt;
color: maroon;
text-decoration: none;
}

.SignatureText {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 9pt;
color: #333333;
text-decoration: none;
}

B { font-weight: bold; }
.red { color: #880000; }
.grey { color: #999999; }

.statistictext { color: white; }
.statisticvalue { color: yellow; }

.QuotedText {
border: 1px dashed #888888;
background-color: #A1A3AC;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 9pt;
color: white;
text-decoration: none;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
}

.tos {
font-family: verdana,arial,sans-serif;
font-size: 8pt;
}

.AdminMenuLink {
background-color: transparent;
font-family: tahoma,arial,sans-serif;
font-weight: bold;
font-size: 8pt;
color: #FFCC99;
text-decoration: none;
}

</STYLE>



What I want is to make everything gradient, two colors to each to give it a 3d-ish type look.


ANy help would be appreciated.

Use a gradient as a TD background image.

.classname{
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A5C7EF', startColorstr='#102C6B', gradientType='1');
}

this may not work on browsers other than IE6+

hope this helps.

this may not work on browsers other than IE6+

It definitely won't work on anything but IE. What versions it will work on I don't know.

The best bet is to use a CSS background image. CSS gradients are not yet available, but are scheduled for CSS3 (whenever that is finished and is supported by the browser vendors).

IE has so many cools CSS features, but many do not work on other browsers making them next to obsolete.

As for the gradient you need to make a one pixel thick image and put that as your background for your cell.

You can hardly call a 3-year old broswer with lack of many css2 features a modern one either. I'm not trying to start a flame, just putting things into porspective.

Regards

You can hardly call a 3-year old broswer with lack of many css2 features a modern one either.

Who did call it a modern browser? Point to your post?

Well, saying that IE has so many cool features that make other broswers next to obsolete sounds like that... doesn't it?

I took that post to read that IE has so many "cool features" but they don't work on other browsers, making the features obsolete. At least I hope that was what was meant. Otherwise it's patently clear that person doesn't have a clue about CSS.

Oh... you may be right. I'm sorry then if I misunderstood that.


Regards

Gradient effects are very easy to do with CSS.

Create a gradient in Photoshop (or other imaging program) that is the height you need for your div. The width only needs to be about 5 pixels at the most, and you can probably get away with saving it as a GIF (just make sure the gradient is 256 colors or less if you don't want to lose anything - using Photoshop's "Save for Web" option allows you to check this). In your stylesheet, set the gradient to be the background for your div. Now, to make the gradient tile across the entire div, specify "repeat-x". To make the gradient tile up/down the div, specify "repeat-y". Below is some example code with our example div called "header" and the graphic called "headerbg.gif":

#header {
background-image: url(/images/headerbg.gif);
background-repeat: repeat-x;
width: 100%;
height: 100px;

This code makes the gradient tile horizontally across the div. Make sure you specify the height of the gradient in pixels when using repeat-x (in this case 100px), and the width as 100%. The graphic used in this code was 100px tall and 5px wide (to keep it very small - only 700 bytes), yet it tiles all the way across the div and looks like a solid gradient. Hope this helps!

CSS support in Internet Explorer is generally horrible. Alvinks doesn't really know what he's saying.

However, the CSS I just showed works fine in IE at least back to version 5.0. And of course it works perfectly in Mozilla, Firebird, Opera, etc., all of which have excellent CSS support.