CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Sebastian Berglönn
Sebastian Berglönn

Reputation: 4278

CSS looks different in Firefox than Google Chrome, what can I do?

For fun, I am doing a table with two cells in each row. And I want the cells in the first row to have the same picture, so I wrote in CSS:

tr:nth-child(1){
background-image:url("cat.jpg");
background-size:cover;
border-radius:10px;
}

And my HTML code looks like this:

<tr>
  <td>Ruta 1</td>
  <td>Ruta 2</td>
</tr>
<tr>
  <td>Ruta 3</td>
  <td>Ruta 4</td>
</tr>

So, you should have the same picture on each cell, which I have in Google Chrome. But when I use this in Firefox, I get the same picture over two cells.

Google Chrome, and Firefox.

Any clue of what this is about? Can I write something in my CSS do make it work for Firefox. thanks in advance!

Upvotes: 0

Views: 407

Answers (2)

Al.G.
Al.G.

Reputation: 4387

Apply background to cells - <td> and not to rows - <tr>.

tr:nth-child(1) td {
    background-image:url("cat.jpg");
    background-size:cover;
    border-radius:10px;
}

You want each cell to have its own picture, not each row.

Upvotes: 1

Amin charoliya
Amin charoliya

Reputation: 606

In firefox don't set background-image or color in tr, It will make problems. Instead add to td.

tr:nth-child(1) td{background-image:url("cat.jpg");}

Upvotes: 1

Related Questions