I'm facing an issue where my website appears fine in FireFox (screenshot), but the tables get messed up in Chrome (screenshot).
I've gone through my html and css validation and tried various solutions, but I'm completely lost on how to resolve this.
HTML:
<div id="top" class="topbg" style="width: 100%; height: 457px;">
<table style="width: 100%">
<tr>
<td style="width: 459px; height: 102px"></td>
<td style="height: 102px; width: 433px;">
<div style="clear: both;" class="toptitle"></div>
</td>
<td style="height: 102px; width: 545px;">
<table cellpadding="0" cellspacing="0" style="width: 99%; height: 105px">
<tr>
<td class="auto-style1" style="height: 28px">
<a href="#"><img alt="" height="18" src="flags/de.png" width="25" /> </a>
<a href="index-it.html"><img alt="" height="18" src="flags/it.png" width="25" /> </a>
<a href="index-en.html"><img alt="" height="18" src="flags/gb.png" width="25" /></a>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td style="height: 102px"></td>
</tr>
<tr>
<td style="width: 459px; height: 243px"></td>
<td style="height: 243px; width: 433px;"></td>
<td style="height: 243px" colspan="2"></td>
</tr>
<tr>
<td style="width: 459px; height: 70px"></td>
<td style="height: 70px" colspan="3"><a style="clear: both;" href="#" class="btn1">Verfügbarkeit</a></td>
</tr>
</table>
CSS:
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.bgimg {
background-image: url(images/bg.png);
}
.topbg {
background-image: url(images/topbg.jpg);
}
.topbg2{
background-image: url(images/topbg2.jpg);
}
.toptitle{
background-image: url(images/toptitle.png);
height:110px;
width:270px;
}
.link {
color: #d2c13f;
background-color: transparent ;
text-decoration: none;
}
.link:hover {
color: white ;
background-color: transparent ;
}
.wrapper {
background: #595959;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
display: inline;
}
.wrapper li {
float: left;
padding: 0px 0px;
border: 0px solid black;
}
Appreciate any help!