Question

I have some tables which render fine in IE and Chrome. But in Firefox some of the border arbitrarily don’t show or have different widths. You can see an example Here. Below is the relevant css:

    table {
            font-size: 1.0em;
            border-collapse: collapse;
            border: 3px solid #004C87;
            margin: 5px 5px 5px 5px;
    }


    th, td {
            padding-top: 7px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
            border: 1px solid #004C87;
            text-align: left;
            vertical-align: top;
            line-height: 1.3em;
    }

In the image below I took screen shots as it renders in the different browsers. The black arrow depicts the situation where the line/border does not show. The red arrow illustrates situation where the width is different.

If I were to repeat these tables the occurrences would be arbitrary.

Answer 1

I’m posting this as the answer as I’m convinced at this point you must be just a little zoomed out in Firefox. Try pressing Ctrl+0

If you compare the two tables in the image you provided, you can see that the bottom one is slightly larger than the top one.