Forum Moderators: open

Message Too Old, No Replies

Border color

?

         

keyplyr

11:55 pm on Jul 19, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ooops - found 3 remaining tables using border="1" bordercolor="#000000"

How would that be included in this class? Thanks

table.graph {
background: transparent;
color: #000000;
font: 13px verdana, arial, sans-serif;
text-align: left;
}

papabaer

12:01 am on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



table.graph {
background: transparent;
color: #000;
font:13px verdana, arial, sans-serif;
text-align:left;
border: 1px solid #000;
}

Of course, you can adjust the px size to suit...

You might find this just about right:

table.graph {
background: transparent;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align:left;
border: 2px solid #000;
border-collapse: separate;
border-spacing: 0;
}

The last two border styles will "tighten-up" the table... Opera, Mozilla/Netscape and other compliant browsers will recognize this, IE has a little catching-up to do. ;)

keyplyr

12:43 am on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




Thanks Papabear, thius allows me to remove the nonstandard code. It isn't looking quite as I would like it yet however. Cells that share a common wall are
displaying twice the border.

I'll try your other suggestion.

page in profile

keyplyr

12:55 am on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Still can't get all the borders uniform. It's OK, just would like it perfect :)

Taking Papabaer's suggestions (border: 2px was too much)...

table.graph td {
background: transparent;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align: left;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 0;
}
tr.cgraph th {
background: #669999;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align: left;
font-weight: bold;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 0;
}

madcat

1:43 am on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



keyplyr- I know this may not be very elegant, but I think if you want to make your borders look balanced you could add an inline style to the <table class="graph"...> tag:

<table style="border: 1px solid black;" class="graph" etc...>

M

keyplyr

5:58 am on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



madcat, well that certainly worked, thank you. LOL - I had forgot all about inline style elements. I really don't know what is considered "elegant" code or not. I just want it to validate without taking a loss in the presentation.

papabaer

12:42 pm on Jul 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Inline styles have a very valid and "efficient" use when applied to "case only" elements. For instance, lets say you have an external style sheet that governs 20 plus pages, but in one instance there is an element you wish to style diffently than what the style sheet dictates.

Maybe it's just a right side border, or a background color - using inline styles saves the over head of adding a limited use style declaration to an external sheet (referenced by numerous other pages) and placing the style or style groupings directly at "point of application" within the element code.

The cascade ensures that the new style(s) will take precedence over any previously declared styles for the element. A general rule of thumb is that you should always try to place your styles where they can provide the widest level of application (external style sheets). But it is also VERY important to recall the phrase CASCADING STYLES.

For single pages with individual styles (page specific layouts and background images for example), you can leave your styles embedded in the head content or move them to an external file. But when an external sheet serves numerous pages, consider inline styles to provide an efficient and "elegant" solution.