CODEWITHSUNDEEP
htmlcssfirefoxcell
cura
cura

Reputation: 43

cell borders not displaying in firefox

I've got a pretty simple table, which should have both table and cell borders displayed. This works fine in Chrome and IE, but Firefox displays only the table border, and not cell borders. Here's the HTML:

<table border = "1" class ="MyTable">
   <tr>
       <td class = "c1"></td>
       <td class = "c2"></td>
       <td class = "c3"></td>
       <td class = "c4"></td>
       <td class = "c5"></td>
       <td class = "c6"></td>
       <td class = "c7"></td>    
       <td class = "c8"></td>
       <td class = "c9"></td>
       <td class = "c10"></td>
</tr>   
</table>

(all the td classes are there to be referred to in later javascript btw - but aren't relevant to this problem, or at least I wouldn't think so)

And here's the CSS:

table.MyTable {
    margin-left: 10%;
}

table.MyTable td
{   
   width: 20px;
   height:30px;
   border: 4px solid black;
}

I've tried 1) using table id instead of table class; 2) removing <table border ="1" > from the HTML and adding the styling information in the CSS instead; 3) splitting the CSS code into separate border-style, border-color and border-width commands. In every case, the code displays as it should in Chrome and IE, but not Firefox.

For reference, this is what it should look like (in Chrome):

Correct rendering in Chrome

This is what it looks like in Firefox:

Incorrect rendering in Firefox

Upvotes: 1

Views: 1714

Answers (1)

cura
cura

Reputation: 43

I've figured out the answer, and I'm adding it here in case anyone else has the same problem. Adding the tag <!DOCTYPE html> at the beginning of the document solves the problem.

Check out the difference:

http://www.users.on.net/~tschembri214/test1.html - displays correctly

http://www.users.on.net/~tschembri214/test.html - doesn't display correctly

I've confirmed that the 2nd link doesn't display correctly on Firefox on 3 different computers. Everything is identical in both pages apart from the inclusion of the doctype tag. Also, this doesn't reproduce on jsfiddle - it works without the tag on Firefox.

Upvotes: 2

Related Questions