Welcome to WebmasterWorld Guest from 107.21.163.40

Forum Moderators: incrediBILL

Message Too Old, No Replies

Firefox 0.9 doesn't display solid color table borders

     
6:48 pm on Jun 27, 2004 (gmt 0)

New User

10+ Year Member

joined:June 27, 2004
posts:7
votes: 0


I am doing a bit of design in Dreamweaver MX for a college (I'm still learning a lot and use the WYSIWYG view mostly, but deal with the code sometimes), and I noticed that the tables I create look strange in Firefox :( [my favorite browser]. Using DW, I set the border color and in IE there is a solid line of that color around the table, as expected, but Firefox makes the table look like a button, darkening the border color on the left and bottom borders of the table.

Is this typical behavior for Gecko, because it doesn't make sense to me?

Thanks in advance...

8:15 pm on June 27, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:942
votes: 123


Welcome to WebmasterWorld, dappex!

If you are actually coding border-style: solid; or border: 2px #f00 solid; I will be surprised.

Are you simply specifying border="2" invoking the browser's default border style? In IE apparently: "solid", in Moz apparently: "outset".

For cross-browser compatibility use CSS and set style as you wish.

10:53 pm on June 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


I just dealt with a similar situation (minus the added hassle of DWs hacked up code, I feel for you). Thanks to the expert advice of iamlost and suzyUK, I got it solved lickety-split.

Here's the thread where their wisdom saved the day. Esp. look to msg #5, therein lies the answer.

[webmasterworld.com...]

10:12 pm on June 28, 2004 (gmt 0)

New User

10+ Year Member

joined:June 27, 2004
posts:7
votes: 0


Thank you for such a warm welcome! :)

I looked over that other post and unfortunately I don't quite understand (due to my lack of knowledge of CSS). What is "nav" and what is "container" and what exactly does that code accomplish? I am confused... iamlost, I added this to the head of my file:

<style type="text/css">
{
border: solid 0px
}
</style>

It didn't fix the problem. Should I nest the td tag inside some type of style tag? Right now I am only using CSS for rollover menus that another website (http://www.webmaster-toolkit.com/css-menu-generator.shtml) creates for you. I would like to use CSS for everything and I am trying to learn as fast as possible. Here is a link to the page I am working on if it is helpful... (http://javatest.broward.edu/honors/navtest.htm) In case you look at the source, note that I did not write the Javascript and have no clue what it does :]

Thanks so much for your help, I will keep researching...

createErrorMsg, you are right about Dreamweavers hacked up code, I found in one page 7 nested font tags around two words of text... (How does that happen?) Can't do without Dreamweaver yet, though, don't know enough...

10:35 pm on June 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


You're almost there. CSS looks like this:

selection { rule: value; }

So, to put a border about a table tag you'd do:

table { border: values; }

where values are what you want the table to look like. You've put 0px in your example - this is probably not what you want :) So, as an example of a 1px solid black border:

table { border: 1px solid black; }

CSS should be contained in a linked CSS file, or within a <style> element contained in the <head> section (like you've put in you last post).

3:05 pm on June 29, 2004 (gmt 0)

New User

10+ Year Member

joined:June 27, 2004
posts:7
votes: 0


Ok, thanks for that explanation... Now I will have valid code at least :)

I replaced the code from my last post with this:

<style type="text/css">
table { border: solid 0px #FFFFFF; }
</style>

It still doesn't work...
(BTW the code above is in the header, and I also have a linked style sheet with some css for menus as I mentioned before, but that code never changes the border style to anything but solid)

3:14 pm on June 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


You have the wrong order. The correct order [w3.org] for the border property is border-width border-style color.

"border: solid 2px #f00;" is incorrect, use "border: 2px solid #f00;"

Robin_reala: A note on terminology and syntax for CSS. A rule is:

selector[, selector]* { property: value; [property: value;]* }

Where []* means 0 or more of the contained item.

4:00 pm on June 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Sorry, of course I should have mentioned that you can contain many rules within one selector.
4:17 pm on June 29, 2004 (gmt 0)

New User

10+ Year Member

joined:June 27, 2004
posts:7
votes: 0


Thanks, I changed the code to

<style type="text/css">
table { border: 1px solid; }
</style>

and now Firefox displays a single pixel (thickness) black border around all tables including those that don't have one. This in addition to the existing bad borders.

4:53 pm on June 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Have you taken off the existing border attributes on the table tag itself? IE will pick up on the CSS as well and won't need the border attributes on the table.
5:17 pm on June 29, 2004 (gmt 0)

New User

10+ Year Member

joined:June 27, 2004
posts:7
votes: 0


If I do that then all the tables will have the same border won't they?, which is not what I want...
7:52 pm on June 29, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:942
votes: 123


Until you decide to add CSS to your list of computer studies(!) the easiest solution is to add inline style declarations where you need them.

Example:
Where you might now have:
<table border="1">
change to:
<table border="1" style="border-style: solid;">
or to:
<table style="border: 1px solid;">

This will allow borders only where you want/have them now but ensure the "solid" cross-browser appearance you want.

I strongly recommend that you investigate the WebmasterWorld CSS forum and do an internet search for "css tutorial". The design control you will then have available is astounding.

9:39 pm on June 29, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 16, 2003
posts:592
votes: 0


I am confused... iamlost

I don't know if that was intentional but its a good one :)

I'll second iamlost's suggestion of reading some introductory css material. It will save you a lot of headaches.