Table Issues w/ Browsers in Dreamweaver

[rlowe82]

Hey everyone,

When I create tables in Dreamweaver and preview them in Safari, they appear exactly as I want them to. When I preview them in Firefox, they retain none of the attributes I set for them, such as border color or background color. Why would this be?

I'm using Mac OS X 10.4.8.

Thanks!

www.thisisrichard.com

[chicgeek]

Seems like this will be more of a coding issue. Moved to the coding forum.

Could you post a screenshot of what it looks like in *shudder* safari?

[rlowe82]

Here's the screenshot:

www.thisisrichard.com/safariscreenshot.tiff

I have a white table around my name and links, which also have a black table around them. Seem that in Firefox, it's just gray.

Thanks!

[StupidScript]

Firefox is behaving as expected when trying to colorize the borders of a standard table. (Safari has a different way of doing things ... ) There are 3 'borders' within each segment of a table border: highlight, shadow and cellspacing. By default (as in your case), the "bordercolor" attribute only affects the highlight part of the border.

Here's a little reworking of your code to accomplish what you want:

<style type="text/css">
body {
 background-color: #cccc99;
}
.outertable {
 border-style:solid;
 border-color:white;
 border-width:2px;
}
.innertable {
 border-style:solid;
 border-color:black;
 border-width:2px;
 background-color:#cccccc;
}
.menu {
 border-bottom-style:solid;
 border-bottom-color:black;
 border-bottom-width:2px;
}
</style>
...
<table cellspacing="0" class="outertable">
<tr>
<td width="274">...</td>
</table>
<table width="116" height="156" cellspacing="0"  class="outertable">
<tr>
<td width="274" height="154"> <-removed bgcolor
<table width="112" cellspacing="0"  class="innertable">
...
<tr>
<td class="menu"><a href=..><img src=..></a></td>
<tr>
<td class="menu"><a href=..><img src=..></a></td>
...
<tr>
<td><a href=..><img src=..></a></td>
...etc.

The LAST cell in the menu does NOT get the class assignment ... its border is provided by the table itself. Also note that I removed the "border=1" attributes from each of the tables, because they force the 3-D border, and you don't want that ...

[chicgeek]

SS: You have more patience than I do today.

rlowe: Let us know how you fare.

[rlowe82]

Wow. Thanks for that. That helps tremendously in my learning borders with CSS.

Thanks

[chicgeek]

CSS = your best friend.

Well, not completely true. If that's true, then you might need some help. But it is a great tool!

[rlowe82]

One more thing: do you have to write this code for each page? Or is there a way to have every page link to a file that tells it how to be laid out?

Thanks!

[StupidScript]

Create a new stylesheet file containing just the definitions (everything between the <style..> and </style> tags) above, then remove the "empty" <style...></style> tags.

Assuming your stylesheet (CSS) file is named "style.css", you would want to place the stylesheet reference below within the HEAD section of each HTML page:

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

Then, on each page, simply refer to the class definitions as noted above. i.e. anything that you want to have a white, 2px solid border (tables, DIVs, whatever) gets assigned a "class='outertable'" attribute.

Regarding the title/menu group, yes, you would need to put that on each page, as in your example. As an alternative (one which I use everywhere I can), you may be able to use server-side language like PHP, ASP or SSI to "include" the title/menu group in each page ... but that's a bit off-topic.