Table class in CSS works in Firefox and Safari but not in Chrome

Question

I defined a table class in CSS which works fine in Firefox and Safari but not in Chrome:

Does anybody know why?

css:

table.joni td{
font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-serif;
font-size: 12px;
position: relative;
left: 20px;
width: 500px;
height: 25px;
color: black;
}

complete html:

<!DOCTYPE html>
<html>
<head>
<title>D.E.L.F.</title>
<link rel="stylesheet" type="text/css" href="delf.css">
</head>
<body>
<br>
<p><a href="index.html">< back</a></p>
<br>
<p>Jonathan R&uuml;de - 10.06.- 30.06.</p> 

<p>

</p> 

<img src="JONATHAN_RUEDE_AT_DELF.jpg" alt="HTML5 Icon" 
style="width:98%;">
<br>
<br>

<table class="joni">
<tr>
    <td>jeden tag
<br>
<br>
content
</td>
   
    <td>content
</td>
    
  </tr>
  </table>
<br>
<br>
<br>
<br>
</body>
</html>

complete css:

table {

font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-
serif;
font-size: 12px;
position: relative;
left: 0px;
color:black;
}



h1 {
color: white;
text-align: center;
}

p1 {
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 22px;
color: white;
position: relative;
left: 20px;
max-width:1000px;
}

p2 {
font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-
serif;
font-size: 12px;
position: absolute;
left: 20px;
bottom: 7px;
}


p {
font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-
serif;
font-size: 12px;
position: relative;
left: 20px;
max-width:1000px;
}

p.ex {    
width: 1000px;
}

img {
position: relative;
left: 20px;
margin-top:10px; /*to have the space above the image*/
margin-bottom:10px; /*to have the space under the image*/
}




/* unvisited link */
a:link {
color: black;
}

/* visited link */
a:visited {
color: black;
}

/* mouse over link */
a:hover {
color: black;
}

/* selected link */
a:active {
color: black;
}

a:link {
text-decoration: none;
color: black;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: none;
}

.box{ 
 background-color: #F5F5F5;
position: absolute;
height: 30px;
width: 100%;
left: 0%;
bottom: 0%;
z-index: -1;
}

.logo{

z-index: -1;
position: absolute;
width: 40%;
left: 700px;
top: 25px;
}

td {
font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-
serif;
font-size: 12px;
position: relative;
left: 20px;
max-width:1000px;
width: 400px;
height: 25px;
}

table.joni td{
font-family: "News Gothic MT", Helvetica, "Microsoft Sans Serif", sans-
serif;
font-size: 12px;
position: relative;
left: 20px;
width: 500px;
height: 25px;
color: black;
}

How does it break in Chrome? I've tested your site and your sample code and it renders the same in Chrome 60 and Firefox 55 on Windows. — agrm, Aug 12 '17 at 15:21
On a sidenote, on line 9 you have put `< back` in your markup. As angle brackets are used to define HTML elements, this can potentially cause unwanted behaviour. Write `> back` instead :-) — agrm, Aug 12 '17 at 15:24

Table class in CSS works in Firefox and Safari but not in Chrome

0 Answers0