CODEWITHSUNDEEP
css
Jim
Jim

Reputation: 13

CSS Columns works with all browsers except Firefox

I can't seem to get Firefox to cooperate with my 3 columns. It works with all the other browsers. Please have a look at http://www.usslittlerock.org/Marines_Workpage.html. I stripped everything off the page except the relevant CSS and HTML. I've worked with columns before with no problems but this time I used tables in the mix. The look of the layout needs to remain the same. I would actually prefer to eliminate the TABLES but I don't know how to keep the layout style with CSS alone. I've tried a number of different solutions from this site but none work. Thanks for any suggestions you can give.

Upvotes: 1

Views: 63

Answers (1)

pbuck
pbuck

Reputation: 4551

http://caniuse.com/#search=column-gap reports, under known issues:

Firefox does not split tables into columns

Sorry.

Good new, you can keep you code mostly intact, but replace everything with div's. (this is the easiest way for me to explain it):

With your favorite editor do some simple text replace:

<table> --> <div class="table">
<th>    --> <div class="th">
<tr>    --> <div class="tr">
<td>    --> <div class="td">
<tbody> --> <div class="tbody">
... and the equivalent </table> --> </div>, etc.

Change your CSS:

.marines table --> .marines div.table
.marines table th --> .marines div.th
.marines table td --> .marines div.td

Add a few new bits to your existing css:

.marines div.td {
     ....
     display: inline-block;
     width: 52%;
}
.marines div.th {
    ....
    display: inline-block;
    width: 52%;
}
.marines div.td:nth-of-type(2) {
    width: 20%;
}
.marines div.td:nth-of-type(3) {
    width: 25%;
}

and it will work in all browsers (This isn't a complete answer -- you'll still need to handle the Bold text in the headings and the index-Letters, but I think you get the idea.)

Upvotes: 1

Related Questions