HTML, CSS & PHP cross browser styling - php

Question

I'm a self taught coder and usually I can figure out problems for myself but this ones a stubborn one. I'm redesigning a website for my friend and I've successfully coded the mobile version of his site, but the desktop version is proving to be difficult.
The site is a database for a home bar, tracking; Drinkers, Shots, Units and Tabs. The index page is a leaderboard with Drinkers & Last Drink bought. My problem is positioning the Drinkers Ranks on the leaderboard to work across multiple web browsers.
It's meant to look like this: (screenshot)
http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg
The alternating background is something I'm willing to scrap if it makes echoing results easier.
I've tried using tables, divs, ul/li's.. sample of what I used:
<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
<tr>
<th colspan="3" align="left">Chris Clarkson</th>
</tr>
<tr>
<td>
<div class="crop round-five body-shadow" >
<img src="uploads/1.jpg" class="" />
</div>
</td>
<td>
<ul><h2>382.73</h2><li>units</li></ul><br />
</td>
<td>
<ul><h2>613</h2><li>shots</li></ul><br />
</td>
</tr>
</table>
but its just coming out as a big mess, can anyone help?

Answer 1

Definitely should be using table to do this in my opinion.
As for displaying the alternating colors, you would want to apply a background color to the tr's using nth-child() pseudo-class.
JSFIDDLE: http://jsfiddle.net/XYh7f/
HTML:
<div class="container">
<div class="leaderboard">
<table id="main">
<tr>
<td>Leaderboard</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="drinks">
<table id="main-data">
<tr>
<td class="data-title"><h2>Last Drinks Served</h2></td>
</tr>
<tr>
<table class="data">
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
</table>
</tr>
</table>
</div>
</div><!-- END CONTAINER -->
CSS:
/* CONTAINER STYLES */
.container {
width: 960px;
}
.leaderboard {
float: left;
}
.drinks {
float: left;
}
/* LEADER BOARD STYLES */
table {
color: #eee;
width: 200px;
background: none;
}
tr { background: none; }
td { background: none; }
#main {
text-align: center;
}
#main tr:nth-child(odd) {
background: #444;
}
#main tr:nth-child(even) {
background: #555;
}
#main tr td .client tr {
background: none;
}
/* LAST DRINKS SERVED STYLES */
#main-data {
width: 740px;
}
#main-data tr:nth-child(odd) {
background: #444;
}
.data {
width: 740px;
}
.data tr:nth-child(odd) {
background: #222;
}
.data td {
border-right: 1px solid #000;
}
.data tr:nth-child(even) {
background: #333;
}
.data-title {
padding: 0 0 0 60px;
}
.data-time {
text-align: right;
width: 120px;
}
.data-shots {
text-align: right;
width: 60px;
}
.data-drink {
text-align: center;
width: 240px;
}
.data-drinker {
text-align: left;
width: 200px;
}
.data-date {
width: 140px;
}