Border colors in FF? [Archive] - Dynamic Drive Forums

View Full Version : Border colors in FF?

Bernie Kruger

11-28-2009, 06:10 PM

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

11-28-2009, 06:24 PM

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

Bernie Kruger

11-28-2009, 06:51 PM

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

jscheuer1

11-28-2009, 08:28 PM

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

11-29-2009, 07:03 AM

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">

</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

11-29-2009, 02:04 PM

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

11-29-2009, 06:52 PM

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

11-29-2009, 08:24 PM

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

11-29-2009, 08:49 PM

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

11-29-2009, 10:16 PM

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/css/propindex/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.

bluewalrus

11-29-2009, 10:17 PM

Bernie Kruger

11-30-2009, 05:11 PM

Thanx John

I spent the day cleaning out all the crap and created a stylesheet common for all the kitchen pages and reduced sizes by 35-45%, even locally I notice an improved performance.

When you have the time, the handles page I want to revamp and was looking at your hotspot scripts.

One idea I have is to mouse over with the sizes rather than a spreadsheet presentation and from a marquee slideshow and reveal bigger image with the hotspots so it will be a combo of both these scripts

Some of my images have 5 similar handles, is it possible to map each handle (I have PaintShopPro 9) and version 8 had this feature IIRC.

Any suggestions would be appreciated

See:
http://www.lbk.co.za/Const/handles/modern.htm
And:
http://www.dynamicdrive.com/forums/showthread.php?t=27814

No rush as I still have a few days of work ahead with the tables clean up :(

jscheuer1

12-02-2009, 03:03 AM

Is there an advantage to specifying each attribute as you have done or is this

border-color: #e0dfe3!important;
border-width: 1px!important;
border-style: solid!important;

the same as this

border: #e0dfe3 1px solid !important;

or is there a disadvantage to one of these?

Well, that was in response to a specific issue. Those properties were already declared separately. To be fairly certain of overriding them in all browsers, even using the !important keyword, one must list them separately for that purpose.

But, in general you are right, no advantage.

jscheuer1

12-02-2009, 03:27 AM

Thanx John

When you have the time, the handles page I want to revamp and was looking at your hotspot scripts.

One idea I have is to mouse over with the sizes rather than a spreadsheet presentation and from a marquee slideshow and reveal bigger image with the hotspots so it will be a combo of both these scripts

Some of my images have 5 similar handles, is it possible to map each handle (I have PaintShopPro 9) and version 8 had this feature IIRC.

Any suggestions would be appreciated

See:
http://www.lbk.co.za/Const/handles/modern.htm
And:
http://www.dynamicdrive.com/forums/showthread.php?t=27814

No rush as I still have a few days of work ahead with the tables clean up :(

Well, PSP 9 most likely can make image maps (the technical term for images with hot spots), just about any advanced image editor can. My Imapper script simply makes it easier to integrate other scripts with the hot spots of an image map if they are required to be triggers for other content that will be dependant upon where the mouse is as it hovers over and/or clicks your image map. However, all area tags in an image map may be given title attributes. This will allow them to pop up short descriptive tips when hovered, ex (area tag wrapped in a valid manner to show title attribute more easily):

<img id="map1" width="600" height="982" src="images/sponsors_o.png" usemap="#1" alt="Sponsors Graphic" title="" border="0">
<map name="1">
<area shape="rect" coords="34,19,264,117"
href="https://www.firstkeystoneonline.com/"
target="_blank" alt="First Keystone Bank Online"
title="First Keystone Bank Online">
<area shape="rect" coords="239,1,541, . . .



. . . 97,971" href="http://www.safegardgroup.com/" target="_blank" alt="Hibbard Brothers / Safegard Group - Insurance" title="Hibbard Brothers / Safegard Group - Insurance">
<area shape="default" nohref alt="">

</map>

No Imapper or other script required. If you want something more elaborate than that, first try out the script you want to use with your image map. It may work fine without Imapper. If it doesn't, Imapper may or may not help, but it is worth a try. It often does.

Bernie Kruger

12-03-2009, 06:28 PM

Just when I thought I'd get cute...Damn

Can someone explain why this

Home | Revamping | Examples | Designs | Drawer Units | Fridge Units | Oven Units | Gallery

declared with a color preference of #0066FF with all the links, FP generates this:


<a title="Home" target="_parent" href="../Index.htm">


Home</a> | <a title="Revamping Existing Kitchens" href="revamp.htm">Revamping</a> | <a title="Examples" href="Examples.htm">Examples</a> | <a title="Designs" href="designs.htm">Designs</a> | <a title="Drawers vs. Cupboards" href="drawer.htm">Drawer Units</a> | <a title="Fridge Unit designs" href="fridge.htm">Fridge Units</a> | <a title="Oven Unit designs" href="EyeLevel.htm">Oven Units</a> | <a id="active" title="Enjoy the slideshow" href="#">Gallery</a> 



I tried declaring a linked CSS stylesheet definitions for a footer navigation (text) menu but all it seemed to affect was the "|" delimiters as far as the color went, the rest was affeted by the styklesheet codes of:

a, p {
font-family: arial, sans-serif;
font-size: 11pt;
}
p {
margin: 3px;
}
a {
font-family: arial, sans-serif;
font-size: 11pt;
color:auto;
}
a:link {
font-family: sans-serif;
}
a:visited {
text-decoration: none;
color: #999999;
font-family:sans-serif;
}
a:active {
text-decoration: none;
font-family: sans-serif;
color: #99CCFF
}

I tried declaring "fp" (footer page) and then tried declaring fp:link fp:active etc as styles just for the footer. That did not work even when I substituted spaces or "," for the ":"

I tried declaring a paragraph tag as and the putting all that inbetween the tags, does not work

I am in a split frame and even went as far as opening frame page in a separate tab.

I do not always want text decoration in the other sheets of imbedded text links.

I have multiple sheets I want to use this footer menu in

What am I doing wrong?:mad:

jscheuer1

12-03-2009, 08:27 PM

You are about to the point where you might be better off with a context sensitive but otherwise purely text editor like the free NotePad++. It can launch your page in the browser of your choice and by simply refreshing the browser you can check your progress. It is available here:

http://notepad-plus.sourceforge.net/uk/site.htm

That way you won't have to deal with FP misinterpreting what you intend. However, even with FP, you would be better off making up a stylesheet and then not declaring any styles for the elements you are creating with it, simply instruct FP as to what class and/or id to give the elements you are creating.

Bernie Kruger

12-04-2009, 08:48 AM

Thanks John

For anyone reading this, here is how I solved my problem.

In the stylesheet I did this

a, p {
font-family: arial, sans-serif;
font-size: 11pt
}
p {
margin: 3px;
}
a {
text-decoration: none;
}
a:link {
color: #3366FF
}
a:visited {
color: #6699FF
}
a:active {
color: #999999
}
a:hover {
text-decoration: underline;<-- this must come first and last in
color:#FF3300 <-- the list of all the a: tags in this order
}

And in the footer menu I did this:

 

<a style="font-size: 9pt" target="_parent" href="../Index.htm">Home</a> |
<a style="font-size: 9pt" title="Remodel/New Kitchens" href="Remodelling.htm">
Remodelling</a> |
<a style="font-size: 9pt" title="Revamp Existing Kitchen" href="Revamp.htm">Revamping</a> |
<a style="font-size: 9pt" title="Examples" href="Examples.htm">Examples</a> |
<a style="font-size: 9pt" title="Designs" href="Designs.htm">Designs</a> |
<a style="font-size: 9pt" title="Drawer Units" href="Drawer.htm">Drawer Units</a> |
<a style="font-size: 9pt" title="Fridge Units" href="Fridge.htm">Fridge Units</a> |
<a style="font-size: 9pt" title="Oven Units" href="EyeLevel.htm">Oven Units</a> |
<a style="font-size: 9pt" title="Enjoy the slide show" href="#">Gallery</a>

 

For each page the menu appears in, the selected page href and title is changed as shown in the last line.

Now in the stylesheet, I discovered, it matters the order of the styles of particularly the hover and also the hover color must follow the text decoration tag or else it does not work.

Maybe there is another way around this.

However, where ever I have thumbnails with images, on mouseover in Firefox, the text decoration changes the border. I had to go redefine all the image borders like this

<img id="imbdr"...

to read a style

#imbdr {
border: 1px solid #000;
padding: 0px
}

So it seems that each browser has it's limitations, :(

Bernie Kruger

12-04-2009, 01:38 PM

John

I am trying to force the links to display the active link

Here is what I tried based on your thicktabs approach

a, p {
font-family: arial, sans-serif;
font-size: 11pt
}
p {
margin: 3px;
}
a {
text-decoration: none;
}
a:link {
color: #3366FF;
}
a:visited {
color: #6699FF
}
a.active{
color: #999999
}
a.active#selecteditem {
color: #999999
}
a:hover {
text-decoration: underline;
color:#FF3300
}

I am calling this CSS with

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

What is happening even with an href="#" tag, the color changes to visited instead of active, I have never understood how this is achieved properly.

The menubar looks like this on an active page with that page's active selection tagged with id="selecteditem";

Home | Renovations | Garage Doors | Architraves | Ceilings | Plumbing & Electrical | Flooring

Instead of

Home | Renovations | Garage Doors | Architraves | Ceilings | Plumbing & Electrical | Flooring

Help...

ETA:
Got nothing published yet for you to look at.

Bernie Kruger

12-05-2009, 02:30 PM

Sorry to waste your time, this can only be achieved manually, I misunderstood active to mean the color would change for the current selected page, it seems however the color only changes on a mouse click and the reverts back to visited color, pretty stupid IMO, who wants a color change on mouse click.

That is like trying to sneeze with your eyes open, pretty useless:D

Pity, it would be nice to declare this in a stylesheet for text context menus.

Bernie Kruger

12-07-2009, 05:57 AM

OK I have sorted most my tables sheets with a stylesheet but this page, I am having problems getting the dynamic display div to remain centered with firefox

http://www.lbk.co.za/Const/Finishes/Synthetic.htm

My previous iteration with all the FP superfluous code did not do this.

In this version, I have embedded a table within a <tr> <td> tag to try and get around this problem. Did not work.

Any suggestions?

the code is cleaned up pretty well and easy to follow.

here is the bits of the display area bits.

<td id="td3cm" colspan="5" rowspan="4"
width="auto" height="auto">
<table id=table4 cellspacing="0" cellpadding="0" style="text-align: center; margin: 0">
<tr>
<td align="center">
<div id="dynloadarea"
style="width:300px;height:300px;">
<img id="imbdr" src="Doors/WhiteAlpine.jpg">
</div>
</td>
</tr>
</table>
</td>
<td id ="td3ci" style="padding:1px;"
width="112">

jscheuer1

12-07-2009, 08:30 AM

Never nest a table if you can avoid it. Here's what I'd go with (All styles should go in the head. I placed them inline for clarity's sake and to avoid conflicts with the stylesheet, if any. No presentational attributes should be used except for colspan and rowspan):

. . . Out="lightup(this, 80, 4)"
src="Doors/Country_small.jpg"
alt="Country"></a>
</td>
<td colspan="5" rowspan="4" style="height:302px;padding:0;margin:0;">
<div id="dynloadarea" style="position:relative;top:-2px;width:300px;height:300px;margin:0 auto;border:1px solid black;">
<img src="Doors/WhiteAlpine.jpg" style="border:none;">
</div>
</td>
<td id ="td3ci" style="padding:1px;"
width="112">
<a href="javascript:void(0)"
onMouseover="modifyimage('dynloadarea', 19)">

<img id="imbdr" style . . .

One other important change, in the script set the image border to 0:

//Set image border width
var imgborderwidth=0

Consider rearranging the thumbnails. There really should be 5 rows instead of 4 to the left and right of the main image. The alt attribute gives a nice tooltip for the thumbnails in IE. To get this effect in any other browser, use the title attribute. You should consider allowing the script to preload your images:

//Preload images ("yes" or "no"):
var preloadimg="yes"

It wouldn't hurt to optimize them as well in a program designed for that.