HTML, CSS & PHP cross browser styling -

HTML, CSS & PHP cross browser styling -

okay i'm self taught coder , can figure out problems myself ones stubborn one. i'm redesigning website friend , i've coded mobile version of site, desktop version proving difficult.

the site database home bar, tracking; drinkers, shots, units , tabs. index page leaderboard drinkers & lastly drink bought. problem positioning drinkers ranks on leaderboard work across multiple web browsers.

it's men't this: (screenshot) http://giblets-grave.co.uk/previews/1400x900_gg-desktop_design_final.jpg

the alternating background i'm willing scrap if makes echoing results easier.

i've tried using tables, divs, ul/li's.. sample of 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 coming out big mess, can help?

definitely should using table in opinion.

as displaying alternating colors, want apply background color 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; } /* lastly 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; }

php html css table positioning