Dreamweaver Border Issue [Archive]

J1mmy

11-28-2006, 04:52 PM

Im trying to create a very simple line border around a cell or table in DW. When I set the border width to '1' I notice some kind of 3D border around that cell, with two distinct lines.

Ive been playing around with it to try and only get one of the lines to appear, but the other line always shows as it seems to have an unattractive 3D effect. Im hope you all know what Im taking about.

Is there anyway I can just create a very somple line border around the table or cell? I would also like to specify a colour too.

nikkiH

11-28-2006, 07:35 PM

When you set the border to 1 for a table or table cell, it is setting that default html property and not using CSS. If you go to code view, you can see the html tags and how it set border=1 on the table tag. It probably also has cellpadding and cellspacing.

When table borders are drawn, they are drawn around the table as well as all cells. Hence, you see two borders.

Create a stylesheet in DW, save it, and link it to your html page.
In your new, empty CSS sheet (or an existing one if you're using one already):

table.defaultTbl {
border: thin solid black;
border-collapse: collapse;
}

table.defaultTbl TH {
border: thin solid black;
border-collapse: collapse;
padding: 0px;
font-weight: bold;
}
table.defaultTbl TD {
border: thin solid black;
border-collapse: collapse;
padding: 0px;
}

Save it.
Now in DW, bring up your table properties and take out any settings for border, color, and whatnot, and instead use this new style you created.
You can click on the table where the little box comes up, right-click, choose CSS Style, then choose defaultTbl.

Now go read some CSS tutorials. :)

J1mmy

11-28-2006, 08:40 PM

Man, CSS seems very useful, I think I need to look into it sometime.

Okay, so basically Im telling DW to forget reading the code from the current stylesheet and start to read it from my new stylesheet?

Could I use this code and implement it into the existing stylesheet?

Its the first time Im doing this is, and I think I need a wee bit more guidance.

How do I create a new style sheet, and what about the other CSS on the existing stylesheet - is DW only going to read the CSS for the table only?

nikkiH

11-28-2006, 09:48 PM

If you have an existing CSS sheet (.css extension and a link in your <head> section>, you can pop that right into it.

Using DW to change the style, you are really changing the table tag in the html from something like this:

<table border="1" cellspacing=5" ..>

to something like this:

<table class="defaultTbl">

You can certainly use more than one stylesheet, but best to start with one until you're more comfortable with CSS. If you want a new blank sheet, it's in the File->New menu.

Once you get that working and your table has black borders as you like, you can change the font colors, backgrounds, and anything else just by editing the CSS sheet.
Now for the REALLY useful part -- if you have 10 pages that all use that class to make pretty tables, and you decide you want to change the font from red to blue, say, all you change is one file. :D
Changing the CSS file will affect everything that uses it.

You may want to set DW to show you a split pane (View -> Code and Design) so you can see both the editor as well as the html, so you get more comfortable with understanding what DW is actually doing when you drag and drop things or change properties, and how that affects the html that the user eventually gets in the browser.

J1mmy

11-28-2006, 11:28 PM

Nice, but could this also be done by, insead of using border="1", use:
style="border: 1px solid black"?

VIPStephan

11-29-2006, 12:45 AM

Yes, these are so-called inline styles. However, while the border attribute of HTML drew a line around the table and it's cells this one:

<table style="border: 1px solid black;">

will only draw a line around the table. You'll have to set it for cells too if you desire.

J1mmy

11-29-2006, 09:17 AM

So where could I enter these values?

nikkiH

11-29-2006, 03:13 PM

Nice, but could this also be done by, insead of using border="1", use:
style="border: 1px solid black"?

Sure, if you want to have to do that for every table, and have to change every html file later.
Also, you won't get border-collapse; you'd need to code that in every TH and TD now as well.
CSS sheets are your friend. :D

J1mmy

11-29-2006, 10:18 PM

Sure, if you want to have to do that for every table, and have to change every html file later.
Also, you won't get border-collapse; you'd need to code that in every TH and TD now as well.
CSS sheets are your friend. :D

Well I havent really created that many pages (thank god). But what I really want to do is create a template which I can use.

What do you mean by the 'border-collapse?

VIPStephan

11-29-2006, 10:29 PM

What do you mean by the 'border-collapse?

You know what I do when something is new to me? I do a search. Sometimes it brings enlightening answers (http://codingforums.com/search.php?searchid=806446) over answers (http://www.google.com/search?hl=en&q=border-collapse&btnG=Google+Search).

nikkiH

11-29-2006, 10:43 PM

border-collapse is CSS, like in the sample I showed you.
That's what keeps the table border and the cell borders from doubling up like you didn't want. It "collapses" the two neighboring borders into just one line.

J1mmy

11-29-2006, 11:42 PM

Ive applied the solid border '1px solid #999999' to my main table which contains all the page contents, that seems to display well on my screen.

However, I have tables within this table, and I would like to also create the same attribute, '1px solid #999999', to these table/cells. When I enter this in DW, it get crossed out, and the following is displayed:

"Border does not apply to your selection because its not inherited. It is applied to an enclosing tag"

Im not sure what this means??

nikkiH

11-30-2006, 02:15 PM

It means you should use the CSS stylesheet like I told you, and give all the tables the same class name instead of mucking with all this inline CSS. ;)

It also means you are changing the properties of the wrong thing by accident, I'd imagine. Border applies to all block elements, including table, TD, and TH. It does NOT apply to TR.

J1mmy

11-30-2006, 08:48 PM

It means you should use the CSS stylesheet like I told you, and give all the tables the same class name instead of mucking with all this inline CSS. ;)

Do you mean like edit the CSS stylesheet directly, which involves all the coding? Well when Im working on the page, the CSS style isnt available in the seperate file, I think its built-in somewhere? So I use the DW CSS interface which I am somewhat more familiar with.

It also means you are changing the properties of the wrong thing by accident, I'd imagine. Border applies to all block elements, including table, TD, and TH. It does NOT apply to TR.

I'm sorry to say, but Im not quite sure what you are talking about here. :confused:

Its all going wrong! :(

nikkiH

11-30-2006, 09:46 PM

You should really pop through a couple html and css tutorials if you mean to code pages. DW is meant to help you with rapid development, not code everything. If you rely on it for everything, you're going to be lost the second it does something, well, like this.

That said, if you followed my instructions, you created a new, blank css file using the File-> new (choose CSS from the General tab) menu.
Save the file as "style.css" in the same directory as your html file.

Copy the CSS I showed you into that file.
Here it is again.

table.defaultTbl {
border: thin solid black;
border-collapse: collapse;
}

table.defaultTbl TH {
border: thin solid black;
border-collapse: collapse;
padding: 0px;
font-weight: bold;
}
table.defaultTbl TD {
border: thin solid black;
border-collapse: collapse;
padding: 0px;
}

Save the file.

Now switch to your html file. Choose Text -> CSS Styles -> Manage Styles
The Edit Style Sheet box comes up. Choose Attach, and navigate to your css file. Add as Link should be the default option, leave that. Click OK. Click Done.

Now the CSS is attached the way I had hand-coded before (link href and all that).

Now any table you want to use that style, in the table properties, for the class, you should see defaultTbl as the style and you should see the changes.

HTH
(go READ some css tutorials! :D)

J1mmy

12-02-2006, 11:30 AM

Yes, its working!

But if I want to create another type of border on the same page, would I need to add that variable into the stylesheet? If so, how would i specify it under the 'class' menu in the table properties?

Thanks!

nikkiH

12-04-2006, 02:33 PM

Ok, now that you got the simple one working, we can start getting creative.

table.defaultTbl

The "table" part means it only applies to tables. The .defaultTbl part is the css class name. You can now make another class just like this one and set the borders and everything as you desire. You then have a new css class :)
You can set elements in your pages to use any class you want in a similar manner with the right-click menu. Omitting the "table" part, you can style divs, spans, or whatever.

Just using "table" would set all tables to be just like that, with no css class name required.

GO READ SOME TUTORIALS :D
There's far too much to go into for me to type out here.
Start with this one.
http://www.w3schools.com/css/

J1mmy

12-04-2006, 04:41 PM

Actually, something happened. I decided to start ona fresh new webpage and use the special border making skills i learnt from you :) and then use that page as a template for my other pages.

However, when it came for me to create the border, it didnt work :( . I correctly attached the style sheet and specified the class. It shows up on the DW design view but not when Im previewing the page. Ive been trying to work it out, and i dont know whats causing this?

trainboy72

12-04-2006, 06:17 PM

This is why I don't like working with dreamweaver, give me a regular old notepad any day because what you make in dreamweaver and then upload to your server is almost always going to look different from the dreamweaver window, it's frustrating. But that's just something you have to keep in mind when working with DW.:rolleyes:

nikkiH

12-04-2006, 07:09 PM

use that page as a template

A REAL template, as in Dreamweaver template?
The default ends up putting the template file in a different directory (a subdirectory), which if you are not careful, will break your links.
Check your paths.
If you did things in the wrong order, your stylesheet may end up in the wrong directory.
The structure should be like

site root
-- template directory
---- template file
html file
css file

The html and the css need to be in the same directory. The template file will have the css link with a "../" in it to point to it properly.
If the css file is in the same directory as the template file, that's not right.

J1mmy

12-04-2006, 07:55 PM

Initially, I was using a proper DW template, then the problem occured, I immediately thought it must be the fact Im using a template.

But now, Im using a normal standard HTML file and the CSS file IS in the same folder/location as the HTML file I am working on.

nikkiH

12-04-2006, 09:26 PM

And the structure with all files has been uploaded to your host?
And you refreshed your browser cache?

Open your html document in code view, and find the line that reads something like
<link href="stylesheet.css" type="text/css" ...

Post the full line here please.

J1mmy

12-04-2006, 09:40 PM

I havent uploaded the page to the web host, Im previewing on my own computer in the browser. Do I need to upload it, it usually displays the page as it should be when I preview it.

Heres the code:

<link href="CSS.css" rel="stylesheet" type="text/css" />

nikkiH

12-04-2006, 10:17 PM

Looks like a caching issue, assuming the files are in the same directory.
Clear your browser cache, close the browser, then try it again. Still see issues, do control+refresh.
Stupid question, but you did SAVE the changes, right? :D
Hey, I've done that. LOL

Also, as an aside, you may want to get used to naming conventions a bit. Don't name things the same thing as a reserved word; basically, if you don't know if it would muck something up, err on the side of caution.

Don't name the css file CSS.css. Don't name forms like form name="form" or a select name="select" and that sort of thing.

J1mmy

12-04-2006, 10:33 PM

Still the same problem Im afriad, Ive done everything you said.

Also, I cant preview the page unless I save it, It prompts me to always save changes before previewing. Also, I have clicked 'save all' when the CSS is open too.

This is strange, should I upload the page and see if I get the same prob?

BTW, do I have to set the border to 1px before appling the class?

J1mmy

12-04-2006, 10:43 PM

UPDATE:

Okay, Ive been messing around with the DW built-in CSS controls, there might have been some sort of conflict?

But theres still one more thing, it when I want to apply a border to the ouside of the table only, it seems to border off everything else. Like the cells and stuff. So I end up with borders for every single line within in the table. Is this an issue with the CSS? I really only want it to border of the outsite of a table only.

nikkiH

12-05-2006, 03:52 PM

Can you upload the code and post a link please?

And yes, if you want to preview, it has to save. It uses a temporary file to show you what the page looks like in the browser.

J1mmy

12-05-2006, 05:41 PM

Yes, Ive uploaded to pages. You can view the codes via:

Link 1 (http://webexie.com/test/temp1.html): Here is the CSS in action for the outline of a table.
Link 2 (http://webexie.com/test/temp2.html): Here is the problem, the border has been created around all the lines within the table! I was only expecting an outline.

nikkiH

12-05-2006, 07:06 PM

You messed up the CSS and took stuff out that I had in there. ;)

If you want ONLY a border around the table, and no border at all for the cells, do this. Note that you MUST have a border style. That's the part that says "solid".

table.defaultTbl {
border: 1px solid #999999;
border-collapse: collapse;
}

table.defaultTbl TH {
border: 0;
padding: 0px;
font-weight: bold;
}
table.defaultTbl TD {
border: 0;
padding: 0px;
}

If you want a border for the cells, but no "double up", you do this.

table.defaultTbl {
border: 1px solid #999999;
border-collapse: collapse;
}

table.defaultTbl TH {
border: 1px solid #999999;
border-collapse: collapse;
padding: 0px;
font-weight: bold;
}
table.defaultTbl TD {
border: 1px solid #999999;
border-collapse: collapse;
padding: 0px;
}

Now, if you've got child tables in there, the border collapse won't affect them, as it is not part of the same table. So you'll see a double border for that embedded table. The only way to avoid that is to set the border more specifically for the child table and turn "off" the top border.

HTH

J1mmy

12-05-2006, 07:17 PM

Thank You! Ive have replaced the current CSS with the new one. It seems to working now. But theres a red wavey underline under:

table.defaultTbl {
border: 1px solid #999999;
border-collapse: collapse;
}

Its suggesting that theres an error there, but its still displaying it properly.

Okay, about the border for the cells. You have kindly supplied the code there for the CSS, but should I just paste that into the current stylesheet, how will it specify it? What name will be given to it?

Almost near the end of this border misery! :)

nikkiH

12-05-2006, 10:21 PM

Its suggesting that theres an error there, but its still displaying it properly.

Hover your mouse to see why.
It's supposedly not Netscape 6 compatible or some such. I have no idea why it thinks that, but NN6 is rather outdated, anyway. <heh>

http://www.w3.org/TR/REC-CSS2/tables.html#borders

should I just paste that into the current stylesheet, how will it specify it

That depends on your current setup. Since I used a class name ("defaultTbl") it should not hurt anything you have existing and you can just copy/paste it into your current sheet, then use that class for your table/s as desired.

When you have to be careful is when you're setting defaults, such as your body, anchors, and the like. Or if you omitted the class name part to try to get an effect for all your tables. Then it would matter where you placed the code. Cascading sheets, well, cascade, and settings can be overwritten.

J1mmy

12-05-2006, 10:43 PM

Yes, it did tell me it wasnt compatible with al browsers.

So if I copy and paste it into the current stylesheet, and then I want to implement it onto my table, what should I select? I cant select defaultTbl, can I, becuase its already for the outline CSS?

Also, I might be adding anchors to a page or two later. How would this affect the layout?

nikkiH

12-07-2006, 10:34 PM

You can select whatever you want, only IDs have to be unique. Classes don't.
If you want a different behavior, you make a new class just like this one and call it something else, then choose that.
Why do you think anchors would affect this? Anchors have little to do with layout.

J1mmy

12-07-2006, 10:51 PM

Okay, now that the outline border is sorted out, I was trying to create a 'border-top' CSS attribute for ONE of the cells within the table. I didnt code it manually on the stylesheet, but whe I applied the CSS, ALL the cells had that same 'border-top' attribute, when I only selected one cel??

Ive been trying to code it myself (LOL!) but it doesnt seem to be working (as expected). Here is what I tried - (Please don't laugh :( ):

border.bordertop {
border-top: 1px solid #CCCCCC
}

When I go to my page in design view, and try to apply it to one cell, it doesnt show up? Maybe Im missing something?

(I think Im getting an idea of this CSS stuff, only if it actually worked!)

nikkiH

12-08-2006, 02:32 AM

So close!
You have to override the other border settings and omit the element selector.

Change your CSS to this:

.bordertop {
border-top: 1px solid #CCCCCC;
border-left: 0;
border-bottom: 0;
border-right: 0;
}

To be safe, put that code underneath the other table code so you're sure it overrides settings properly.

Now apply only to the TD you want to have that class.
i.e.
<td class="bordertop" ...>

J1mmy

12-08-2006, 07:10 AM

Rightio, that new CSS is in (I didnt know you had to mention the other borders aswell :S)

It still doesnt seem to be showing up. But this is the code on the design page.

<td class="bordertop" ...>

Is that supposed to be something like this:

<td colspan="2" class="bordertop"><div align="center" class="bordertop">

Is that okay?

Im currently have a browse though the tutorial you linked, though, I cant promise I understand exactly whats going on, I might have an idea...

nikkiH

12-11-2006, 03:42 PM

If your TD spans multiple columns, yes, leave that in.
Don't use the class for both the TD and the div.

How's that tutorial coming? :D

J1mmy

12-11-2006, 08:53 PM

Its not working :(

It either applies the border top to all the cells within the table, or show nothing at all.

I think I'll just have to use something like this '________________________' LOL

And the tutorials are monsters, they tell me how to do certain things, some of which I already know. But I dont know of any easy and simple step by step one that would teach me how to apply a bordertop CSS.

Thanks anyway, I'll have to live without it :(