Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: open

Message Too Old, No Replies

Firefox table border showing dark lines

     
12:02 pm on Aug 31, 2008 (gmt 0)

New User

10+ Year Member

joined:Aug 31, 2008
posts: 6
votes: 0


Hi,

on my website

in Firefox you see the table border dark at the left and top of the table border. Not the bottom and right sides.

In IE, you see a smooth border, grey color. All round.

I want to know how to remove those border properties, that are on the left and top of the table, encompassing the website.

Any one know. I use dreamweaver..

thanks in advance

4:19 pm on Aug 31, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Are you sure it's a table border and not the effect of some padding or the width of some nested element inside the table, allowing the parent table background to show through? Reduce the problem to the bare minimum and post some code here, someone will be able to help you.
12:02 pm on Aug 31, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 13, 2003
posts: 590
votes: 0


< the next seven posts were moved here from another location >

You should remove your URL, or one of the mods will come along and remove it for you. (No links allowed here.)

You're using deprecated code such as border="1" and invalid code such as bordercolor="#999999". Use CSS border declarations instead.

I can't tell what colors your borders are supposed to be, so the code snippets below are just examples.

In your stylesheet:


table.mytable {
border:1px solid #999999;
}
table.mytable td {
border:1px solid #666666;
}

In your html:


<table class="mytable">

[edited by: tedster at 4:37 pm (utc) on Aug. 31, 2008]

12:14 pm on Aug 31, 2008 (gmt 0)

New User

10+ Year Member

joined:Aug 31, 2008
posts:6
votes: 0


I added the html code, and created a css file called mytable.css

How do I link the html document to the css stylesheet?

thanks!

12:34 pm on Aug 31, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 7, 2001
posts:579
votes: 0


Your code is not compliant with your DTD particularly around table and td attributes. Try installing the Add-on "HTML Tidy" into Firefox and it will show you the problems. You will more than likely end up either changing your DTD to something more accommodating, or using CSS Styles to format your tables.

Example:
<table width="827" border="1" align="center" bordercolor="#FFFFFF">
Could become
<table style="width: 827px; margin-left: auto; margin-rigth: auto; border: 1px solid #FFFFFF;">

12:40 pm on Aug 31, 2008 (gmt 0)

New User

10+ Year Member

joined:Aug 31, 2008
posts: 6
votes: 0


So your saying, the code is out of date, im using the latest dreamweaver, and that's what code it ships with..

Do you know how to link a css stylesheet to a html document? I don't

1:05 pm on Aug 31, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 7, 2001
posts:579
votes: 0


I use Dreamweaver and to ensure I get what I want and it is compliant, I have set the default DTD to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This results in Dreamweaver producing nearer to compliant code, but it will still come up with non-compliance around Tables and cells.

To link to an external CSS File, you need to use:
<link rel="stylesheet" type="text/css" href="styles.css">
Ensure the path to your CSS File is correct.

I find the most important step to ensure compliant code is to Preview the design in Firefox at each step along the way and with a Validator such as "HTML Tidy" installed. This will ensure any coding problems that Dreamweaver introduces will be picked up straight away rather than present a major task when the page or site is complete.

1:37 pm on Aug 31, 2008 (gmt 0)

New User

10+ Year Member

joined:Aug 31, 2008
posts:6
votes: 0


Yeah thanks, i installed html tidy, but the cleaned page had errors.. its a fantastic concept.. I only used IE, but need firefox, as I know people will be using it...

i'm still having problem, as to why, half of the 4 borders of a table, has a black line.. I'm even going through the code, highlighting any #000000 (which is black) and seeing if that code is in there somewhere, making half my table black, and the other half grey. its really annoying, and the fix is like a 1 min job, but no luck as yet... :(

4:10 pm on Aug 31, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


i'm still having problem, ... I'm even going through the code, ... its really annoying, and the fix is like a 1 min job, but no luck as yet... :(

If you post some code, others could take a look too ;)

Also to help find faults, try validator.w3.org (which validates, rather than "tidies"), and if you don't mind installing extensions to Firefox, "Firebug" allows you to inspect the code for each element so you can identfy where/how the borders are being applied.

4:57 pm on Aug 31, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 7, 2001
posts:579
votes: 0


I just styled your table plus took out the conflicting bordercolor attribute from a TD tag and the problem went away:

<table style="width: 817px; margin-left: auto; margin-right: auto; border: 1px solid #333333;">

This takes away the non compliant Table attributes that DW had used for you.

5:50 pm on Aug 31, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


i'm still having problem, as to why, half of the 4 borders of a table, has a black line.

The border of the table element given using the border="1" HTML attribute gives both the <table> and the <td>s inside it their borders

The default border that browsers usually give a table is that the table itself gets an "outset" border style, while the <td> gets an "inset" style.

This, when let to a default color, will result in the discrepancies in color that you are describing..

Even if you do set the color of the borders using the

bordercolor
attribute, because that really, really is deprecated (no longer used) - or was it that it was only ever an IE thing anyway? - attribute then the handling of the 2 together means inconsistent application..

..for instance IE then makes both the borders a solid color, but FF makes only the outer table border coloured, while still "outsetting" it (meaning the right and bottom borders are still darker than the left/top) - However Firefox does not deal with the inner border; IE makes it solid coloured too but FF leaves it at default grey and also still inset so the top/left border are darker than the left/right ones.

This is not really answering you (though the CSS answers you have above are the right answers) but I thought if I explained how table borders are formed that it would help you see how the achieve the look you want using CSS a little easier.. you see when applying a table border via CSS you actually have to explicitly tell *both* the <table> and the <td> elements to have a border if you want to achieve the default look I just described above added comparison sample code below.

As for how to link to stylesheet in DW I don't actually know which buttons to press, but DW is supposedly the most CSS friendly Editor around and probably has a step by step in it.. or search Google, here's one I found.. Dreamweaver External Stylesheet [wellesley.edu]

here's a sample of a default table style "tamed" (made x-browser friendly) with CSS :

<table border="3" cellspacing="5" bordercolor="red">
<tr>
<td>a table cell</td>
</tr>
</table>
<hr>
<table cellspacing="5" style="border: 3px solid red">
<tr>
<td style="border: 1px solid red;">a table cell</td>
</tr>
</table>

The first table is OK in IE, as in it looks the same as the second.. but in FF only the second looks the same as the IE HTML one. In short in this case if it's important to you that the table looks the same x-browser.. then CSS is your more stable solution, whether you use it inline like my example or manage to link a stylesheet - which you should anyway, as I can't image a site/page these days that will not benefit from even the tiniest bit of CSS ;) - is up to you

hope that helps

11:34 pm on Aug 31, 2008 (gmt 0)

New User

10+ Year Member

joined:Aug 31, 2008
posts:6
votes: 0


Thank you for all your help!.

In the html code, it was found a TD tag was the problem, someone fixed it. Your comments have been great. I've learnt how to add add-on's to firefox, like html tidy, and firebug. I hope you all become good programmers! :) I haven't played around with the html code much, as I dont know what to remove etc.. but its working..

Without you, I have no site. Thank You!

8:46 am on Sept 3, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 7, 2001
posts:579
votes: 0


Glad to here that you have solved the problem.

I learned to code HTML many tears ago and used Dreamweaver as my software. This was so long ago, we are talking about DW v2.02 when you couldn't just accept on trust the HTML code produced by any WYSIWYG tools but DW was the best of the bunch.

Anyway, curent versions of dreamweaver are very close to producing code compliant error free pages now but (IMO) can't be left totally unchecked. There is a quick and easy toggle between Design View and Code View so you can check exactly what is being turned out as you go. There is also a Split view showing half a screen of design and half a screen of code. I much prefer the dual screen set-up where the Design view is on one monitor and the Code View on a second monitor. When I introduced this dual monitor setup it increased my throughput by about 30%.

Anyway to get back to your situation, I think using DW while closely watching the Code produced is a painless way to learn HTML just as I did all those years ago.

In addition, to make compliance more straight forward and easy for you to follow, I would reccommend you changing your Default DTD to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">