Border colors in FF?

[Bernie Kruger]

I have seen this discussed before but I cannot remember the reason why.

In FF, the table borders are rendered darker than designed, I have gone to the extent of defining the color code in hex for every instance when I declare a border but this seems to be overridden by FF resulting in a near black border when I spec a really light gray one. In IE it is fine and as I defined it.

Is this a browser bug?

[bluewalrus]

Do you have a link, or code where this can be seen?

[Bernie Kruger]

Check out http://www.lbk.co.za/Const/handles/modern.htm, compare IE to FF, the border colors differ

[jscheuer1]

Put this in your stylesheet for that page:

#table3, #table3 td {
 border-color: #e0dfe3!important;
 border-width: 1px!important;
 border-style: solid!important;
}

[Bernie Kruger]

Put this in your stylesheet for that page:

#table3, #table3 td {
 border-color: #e0dfe3!important;
 border-width: 1px!important;
 border-style: solid!important;
}

OK I tried that and tested locally and there is no change. On the example I posted, FF drops the right border completely.

When we did these pages a few years ago, we actually found a solution to get the htm page sizes down as the FP table manipulators are cumbersome and add a lot of code that is unnecessary, I may have got it here IIRC. We managed to reduce the size of the htm pages by at least 75% compared to FP code.

All I need is some type of example I can refer to an then I should be able to work it out.

The one thing that puzzles me is why can one declare a style and use it consistently with text and <a hyperlink text, yet when one inserts a table, you seem to have to declare all the requirements like % width right border etc.

Lastly, when inserting a table, FP declares the table as table1 table2 etc. Is this a numeric identifier or can one declare multiple tables as table1 for example where one has already declared the style for that table?

I use table outer borders for decoration and the rest for placement holders of images and text.

Here is what I am trying to declare as a style for a table

<style type="text/css">
<!--
table1	{ 
font-family: Arial; 
font-size: 11pt; 
text-align: justify; 
border: 1px solid #dddddd; 
margin: 6; 
padding: 0; 
width:98%; 
cellpadding:0; 
cellspacing:0; 
	}
a            { font-family: Arial; font-size: 11pt }
p            { font-family: Arial; font-size: 11pt; margin-top:0; margin-bottom:0 }
-->
</style>

And here is how the header for a table looks

<table cellpadding="0" cellspacing="0" id="table1" 
style="font-family: Arial; font-size: 11pt; " width="98%">

 <tr><td style="border-top-style: solid; border-top-width: 1px;
border-left-style:solid; 
border-left-width:1px" 
width="56%" 
bgcolor="#EBEBEB"  
valign="top" 
bordercolor="#DDDDDD">

I think you can see the unnecessary repeats.

Also a way to declare default cell tags in a style will be great as I find that the table style does not seem to have a way I know of to declare how they are presented.

If I only want a light border, why is it necessary to declare dark borders too?

I am sure this is basic stuff but I tend to understand the logic behind js scripts better than these dang tables.

ETA:

I will use this page to do what may be suggested but I think this whole section is due for an overhaul and is a candidate for a marquee of thumbnails, mouse over and second mouseover of hotspots to give a screen tip of descriptive specs. There are endless possibilities here instead of a spreadsheet presentation. Got any ideas in this regard that will make this lot more eloquent?

[jscheuer1]

I can only go with what happens when I do it here. The page you linked to used the id table3, not table1 as in the example code from your last post. It also already had its table3 border-collapse style set to collapse, your current example does not, there may be other important differences. The style I gave was for that page, not some other page with other things set. Also, in your example stylesheet from your post you have:

table1	{ 
font-family: Arial;
font-size: 11pt; 
text-align: justify; 
border: 1px solid #dddddd; 
margin: 6; 
padding: 0; 
width:98%; 
cellpadding:0; 
cellspacing:0; 
	}

This (highlighted above) pertains to nothing, if you want it to pertain to the element with the id of table1 it must be:

#table1	{ 
font-family: Arial; 
font-size: 11pt; 
text-align: justify; 
border: 1px solid #dddddd; 
margin: 6; 
padding: 0; 
width:98%; 
cellpadding:0; 
cellspacing:0; 
	}

Now, all this stuff (highlighted) should be removed:

<table cellpadding="0" cellspacing="0" id="table1" 
style="font-family: Arial; font-size: 11pt; " width="98%">

 <tr><td style="border-top-style: solid; border-top-width: 1px;
border-left-style:solid; 
border-left-width:1px" 
width="56%" 
bgcolor="#EBEBEB"  
valign="top" 
bordercolor="#DDDDDD">

Style should be set in the stylesheet. In line styles will override those in the stylesheet, but should not be used. Attributes like:

cellpadding="0"

and:

width="56%"

will be overridden by styles in the stylesheet, if there are any that pertain to that attribute's effect. Attributes are to be avoided, most are deprecated anyway. This means that their effect varies from browser to browser and according to other issues. So they aren't very reliable.

Now, it is pretty clear what attributes like width or height, probably even border and border properties would pertain to as styles, but others like valign and cellspacing/cellpadding may not be.

The valign attribute is replaced by the style vertical-align, cellspacing is replaced by margin for the td element, not the table. Similarly cellpadding is replaced by padding for the td. If you want different styles for a particular td, give it an id to use in the stylesheet. If you have particular styles to apply to two or more td's on the page, give them a class to use in the stylesheet.

So for example, to duplicate the intended effect of your styles (this includes the ones not in effect due to the improper selector for table1 in the stylesheet, and those implied by attributes), using only styles in the stylsheet would go like so:

<style type="text/css">
#table1 { 
	font-family: arial, sans-serif; 
	font-size: 11pt; 
	text-align: justify; 
	border: 1px solid #ddd; 
	margin: 6; 
	padding: 0; 
	width: 98%; 
}
#table1 td {
	padding: 0;
	margin: 0;
}
#td1 {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background-color: #ebebeb;
	vertical-align: top;
	width: 56%
}
a            { font-family: Arial; font-size: 11pt }
p            { font-family: Arial; font-size: 11pt; margin-top:0; margin-bottom:0 }
</style>

The HTML markup (from your post, just altered here to go with these styles):

<table id="table1">
	<tr><td id="td1">

Once you've consolidated things like that, it becomes much easier to tweak it to whatever is required.

[Bernie Kruger]

Thanx John

I have done some of the stuff and have a few bugs I cannot seem to address.

http://www.lbk.co.za/Const/Kitchen/Remodelling.htm

1. The slide show is not centered in the cell in FF, IE it is OK
2. The borders appear to be 2px and not 1px in IE and FF
3. I still need to declare the cell spacing and padding for each table as it appears or else I get the double lines
4. The gaps between the tables, I cannot see what is causing them, I placed them there initially with the design, but with the new method, they are no longer necessary

I am guessing you will find more errors than I have

[jscheuer1]

align is not a style property, the equivalent it text-align. But the proper way to center non-text like the gallery is to give it margins like so:

#simplegallery1 {
margin: 0 auto;
}

More on that other stuff later.

[Bernie Kruger]

Thanx, the slideshow is fixed, will read up on what you have to suggest iro other stuff.

ETA:

What is the significance between #ddd and #dddddd in style sheet colors?

[jscheuer1]

When you express a color value in hex like #dddddd; (a shade of gray) or #000000; (black) or even #ff0000 (which is red), I think you can see the pattern. There is a shortcut available in cases like those. You may use respectively #ddd; #000; #f00; - it just makes sense to take advantage of this. But if you have something like #ebebeb; there is no way to condense that, #eabfa7; - same deal, you have to write it out in full if you want that exact value.

Similarly, if all borders are the same for an element, you can do:

border: 1px solid #ddd;

In fact you are better off. That way if you need to change one border's width, you could just add later, after that:

border-left-width: 2px;

That way you don't have to specify border-top-width, border-right-width and so on, or border-top-style, border-top-color, etc. A goal in setting styles is to keep things as simple as possible. This makes later editing much easier.

Now the problem with the borders appearing thicker is that you have borders on td's and the table, these add up unless you collapse the table's borders, but no need to do that unless you cannot get what you want without it. There is no horizontal-align property. The closest thing would be text-align. Anyways, try out these styles in place of what you have (as of this writing) for the Kitchen/Remodelling.htm page:

#table1 { 
	font-family: arial, sans-serif; 
	font-size: 11pt; 
	text-align: justify; 
	border: 1px solid #ddd; 
	width: 98%; 
}
table td {
	padding: 0;
	margin: 0;
}
#td1 {
	background-color: #ebebeb;
	vertical-align: top;
	text-align:center;
	width: 56%
}
#td2 {
	text-align: center;
	background-color: #ebebeb;
	vertical-align: top;
	width: 44%
}
#td3 {
	background-color: #fff;
	vertical-align: top;
	width: 56%
}
#td4 {
	text-align: center;
	background-color: #fff;
	vertical-align: top;
	text-align:center;
	width: 44%
}
a, p {
	font-family: arial, sans-serif;
	font-size: 11pt;
}
p {
	margin: 0;
}

#simplegallery1 {
	margin: 0 auto;
}

Here's a good css reference with indications as to what works with what and notes on browser peculiarities:

http://www.eskimo.com/~bloo/indexdot...pindex/all.htm

If it's not in there, chances are its not available. This reference is not 100% accurate, but it is very good and fairly easy to use once you work with it a bit.