CSS and the border-color command

[Runt3]

Hi all, I need some help, no matter where I search I can't find "how to" make a border color, where the outside borders AND the inside borders are colored.

For example, http://www.abhtherapy.com/calendar.html (Click on any therapy group to view a calendar).

This calendar has bordercolor="" for now, however that doesn't validate, and if I put the border color in the style sheet only the outside border is colored.

In this case, I need every border colored.

Can anyone help?

[icb01co2]

Hi,
Im not really sure what your wanting to do here. But if you want that calander in some sort of CSS form that will validate then try this:

<DIV Class = "Calander">
<Table>
<tr>

<td class = "Days"> Sunday </td>
<td class = "Days"> Monday </td>
etc....

</tr>
<tr>
<td class = "Date"> 1 </td>
<td class = "Date"> 2 </td>
etc....

</tr>

<tr>
<td class = "Notes"><center>Pilot Class I
4:00pm-5:30pm</center></td>
etc...

</tr>
</table>

</div>

------------------------------------------

Then in css file:

.Calander
{
padding:5px;
border: solid 1px black;
}

.Days
{
border: solid 1px black;
background-color: #C98989;
width: 80px;
}

.Dates
{
border: solid 1px black;
background-color: #CBCBCB;
width: 80px;
}

.Notes
{
border: solid 1px black;
background-color: white;
width: 80px;
height: 50px
}

-------------------------------------

Something like that anyway.

[TrafficProducer]

CSS = Computer Search Spam!!!!

I've heard a stories, could be April Fools joke, that sites using CSS will start to find it harder to get search engine listings.

This is because of abuse of CSS to try to fool search engines.

(May or may not be true..)

[arvana]

The simple answer is that the outside border is set in the <table> tag, and the inside border is set in the <td> tag. In HTML 4.01, you can do this:

<td bordercolor="#999999">

If you use XHTML and CSS, create a class of <td> with your border color, as Chris showed above. But since you're designing a table-based layout, you might as well use HTML 4.01.

Hope that helps!

Arvana

[espectations]

I am learning CSS from this site http://www.w3schools.com/css/css_examples.asp

Please just browse around there as some of the attributes won't work in older browsers......

Re I've heard a stories, could be April Fools joke, that sites using CSS will start to find it harder to get search engine listings.

This is because of abuse of CSS to try to fool search engines.

The only thing I heard about CSS is that using hidden text is being used to spam - there are people way more expert than me in this field but I think as long as you stay with good principles you will not penalized.

I am launching some CSS and XHTML sites to see for myself if it really makes a difference.

I also agree that if you use a table layout you might just as well use HTML 4.01

From what I have seen you have to use CSS and XHTML and I am currently checking out the cross-browser issues.

[ravnic]

<td style="border-left:1px solid #ff0000; ">

you can change the left to any side

top bottom left or right.

use this it is awsome. Then you dont have to worry about using CSS tags.

[Runt3]

Thank you all for your help! I got it, thank you icb, I needed someone to spell it out for me like that. I'm new to style sheets, and am just now figuring out classes. Thanks all for your responses.

[benihana]

<td style="border-left:1px solid #ff0000; ">

Using that method, you arent really removing presentation from content, which is the main point of CSS.

More efficient to give the table an id (#cal in this case), and use an external stylesheet:


table#cal {
border:1px solid #000;
}

table#cal td {
border:1px solid #f00;
}

CSS = Computer Search Spam!!!!

....using CSS will start to find it harder to get search engine listings.

April Fool.

[Conficio]

Originally Posted by espectations

I also agree that if you use a table layout you might just as well use HTML 4.01

I think this is a legitimate use of tables in (X)HTML with CSS. As the information is a naturally presented in a table.

The table is not misused here to just position parts of a background image and enforce the layout. I see no reason to use other CSS layout mechanisms instead of a table.

By the way, a CSS solution should be much faster here than a HTML 4.01 implementation, as the browser can pre-compile the attributes for each element and reuse them over and over again. Loads faster, draws faster!

Also if the calendars are the only tables you use, you do not need to have any class information and can just format the td elements directly

table {
border:1px solid #000;
}

table td {
border:1px solid #f00;
}

But the overhead for an id for the table is minimal (as proposed by benihana).

Good luck

K<o>