HTML, CSS & PHP cross browser styling

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?

Define big mess. You can't have an h2 in the middle of an ul. An ul can only contain lis — six8
– six8, Commented Feb 5, 2013 at 12:51
cellpadding, cellspacing, width, align etc as attributes in the HTML are deprecated in favour of using CSS for layout. In addition, if the HTML table is being used layout rather than for a table of data, that is also deprecated. — SDC
– SDC, Commented Feb 5, 2013 at 13:07
Firstly add in the closing tag for </table> at the end of the table — user1959825
– user1959825, Commented Feb 5, 2013 at 13:15
@SDC why do you think this isn't tabular data? His markup is certainly less than ideal (ignoring the invalid markup), but a table is entirely appropriate here. One person should be one row, not 2. If that's not how you want it to look, you can reformat the table by modifying the display properties of the elements in question. Don't use an h2 just because you want the font to be bigger. — cimmanon
– cimmanon, Commented Feb 5, 2013 at 13:19

Michael · Accepted Answer · 2013-02-05 17:19:29Z

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;
}

this is good! very helpful, tho putting a border-radius on this is tricky right? Thank you for this by the way!!
Tricky, but not impossible. It will probably involve having to use some :first-child pseudo-class and maybe :nth-child(1). Look at w3schools for information on :nth-child() and how to use it.

Collectives™ on Stack Overflow

HTML, CSS & PHP cross browser styling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related