PDA

View Full Version : border color


rattlsnak
10-21-2009, 05:09 AM
I'm still getting used to CS4 and CSS for that matter, (call me old school!)but having an issue with border color on a table. I have built a table with 3 columns and 3 rows but can only get the outside border to change colors. On DW 8 there was a drop down box where I could simply choose what color I wanted the borders to be but not so in CS4! So I'm trying to do it the CSS way and have entered this on an attached style sheet:

body {background-color:#D4BF55}
table {border-color:#AA5F00}
h1 {color:#2A1F00; font-size:16pt}
hr {color:#AA5F00}
p {font-size:16pt;margin-left:10px;margin-right:10px}

but as I mentioned only the outside border changed and not the borders on the inside rows and columns. I know I can build a complete div ex through CSS but I need the tables for data.

Anyone?

TIA

edbr
10-21-2009, 05:15 AM
you mean td for cell and tr for rows you are only formatting table.
IMO its always a good idea to end your styles with a semi colon

rattlsnak
10-21-2009, 05:34 AM
Thanks for the quick reply. That worked. DUH!! And I added the Semi Colon at the end like you suggested but the autofill function on Dreamweaver didn't put it in there so thats why I initially left it out.

domedia
10-21-2009, 03:29 PM
And I added the Semi Colon at the end like you suggested but the autofill function on Dreamweaver didn't put it in there so thats why I initially left it out. It's because it's not really needed. It's supposed to seperate CSS properties, so it;s not needed at the end.

edbr
10-22-2009, 02:23 AM
yes its just my opinion that its better to do it as it can get overlooked in later modifications . just my habit

rattlsnak
10-22-2009, 03:33 AM
ok, it shows up fine in the DW design window, but when i uploaded it to the server and then accessed the URL, no colors came out in the table borders or hr.. They show up as an off white color instead of the color selected (brown)
The body bg color is fine.

Here is what is have:

body {background-color:#D4BF55};
table {border-color: #804000};
tr {border-color: #804000};
td {border-color: #804000};
h1 {color:#2A1F00; font-size:36pt};
h2 {font-size:28px};
h3 {font-size:24px};
h4 {font-size:14px};
hr {color:#AA5F00};

rattlsnak
10-22-2009, 04:04 AM
It should be noted that I didnt make the table from CSS, I made it through the DW insert table command. It does not have a name or ID, but I tried to add a name and change the CSS file to match, but it still didnt work. I have also tried several different colors with no luck.

If I edit the table and add the color in the source code it works, so I'm just trying to figure out why my CSS code isn't working.

edbr
10-22-2009, 04:36 AM
if you use the semi colons they must be before the curly braces
body {background-color:#D4BF55;}
table {border-color: #804000;}
tr {border-color: #804000;}
td {border-color: #804000;}
h1 {color:#2A1F00; font-size:36pt;}
h2 {font-size:28px;}
h3 {font-size:24px;}
h4 {font-size:14px;}
hr {color:#AA5F00;}

rattlsnak
10-22-2009, 04:47 AM
oops! you can tell when its gets late at night!! ;)

fixed that issue, but still doesnt work..

edbr
10-22-2009, 05:11 AM
no prob we all do stuff like that, ill have to look im very rusty with tables.

edbr
10-22-2009, 05:26 AM
sorry im going to have to pass on this . hopefully someone is more used to tables i could only get it working using inline styles which is not what you want.
<td style="border-color:#F00" >&nbsp;</td>

rattlsnak
10-22-2009, 05:35 AM
ok, i figured it out. by clicking on new CSS rule from within the CSS property box, you can add rules in that way by clicking through the menus. i found this on the DW help forum:

1. Select a table in Design view. If you want just one table to have the border, enter a unique ID for the table in the field on the far left of the Property inspector.

2. Open the CSS Styles panel, and click the New CSS Rule button at the bottom right of the panel. This opens the New CSS Rule dialog box.

3. If you want some tables to have the border, select Class as the Selector Type, and enter a name for the class in the Selector Name field. If you want just one table to be styled this way, select ID as the Selector Type and enter the ID in the Selector Name field. To apply it to all tables, choose Tag as the Selector Type. If you have a table selected, Dreamweaver should automatically enter table in the Selector Name field.

4. Choose whether you want the style rule to be created in the current document or an external style sheet, and Click OK.

5. In the CSS Rule Definition dialog box, select Border from the Category list on the left.

6. Set the Style, Width, and Color to the values you want, and click OK.


(this works with any property)

and this is what i have now, and it works fine.

table {
border-top-color: #AA5F00;
border-right-color: #AA5F00;
border-bottom-color: #AA5F00;
border-left-color: #AA5F00;
}
tr {
border-top-color: #AA5F00;
border-right-color: #AA5F00;
border-bottom-color: #AA5F00;
border-left-color: #AA5F00;
}
td {
border-top-color: #AA5F00;
border-right-color: #AA5F00;
border-bottom-color: #AA5F00;
border-left-color: #AA5F00;
}

Thanks for pointing me in the right direction!!
And I hope this can help someone else..

:)

domedia
10-22-2009, 05:31 PM
You can delete all those lines and replace it with this:
table, tr, td {border: 2px solid #aa5f00}

You can change '2px' to whatever you want of course.

rattlsnak
10-22-2009, 05:38 PM
i figured there was a shorter way, but thats the way DW auto built it and I had tried this way earlier:

table {border-color: #aa5f00}
tr {border-color: #aa5f00}
td {border-color: #aa5f00}

but I didnt work until i put it in the long way.

I see you didnt include the word 'color' either. hhmmmm...

There are definetly some different issues going on in CS4. It is forcing you to learn CSS. I always used the property inspector before whereas now those options are gone.

domedia
10-22-2009, 06:05 PM
i figured there was a shorter way, but thats the way DW auto built it and I had tried this way earlier:
If you don't like how DW writes it, change it:
You can specify how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh).

table {border-color: #aa5f00}
tr {border-color: #aa5f00}
td {border-color: #aa5f00}

but I didnt work until i put it in the long way.
Then something else on your site is overriding it. The code you pasted above is 100% correct, and code does not get better if you write it a long way, it gets worse.

I see you didnt include the word 'color' either. hhmmmm...
'Hhmmmm' what? It's a shorthand property. It makes your code leaner and cleaner.

There are definetly some different issues going on in CS4. It is forcing you to learn CSS. I always used the property inspector before whereas now those options are gone.
They did this on purpose. It's called Web Standards and defines that all styling be done in CSS and HTML only for markup. Dreamweaver is just catching up, and it's a great thing. My advice to everyone on this forum is that if they don't get into Web Standards asap, then this web thing might not be for them.

rattlsnak
10-22-2009, 06:26 PM
I don't know why the first code didnt work. Thats why I started this thread in the first place because I thought I was doing something wrong!

I know there is a heirachy but i started with a clean sheet.

And I completely agree on the web standards issue.