[nick2price]

Hi guys. Just trying to work out why the following applies now formatting to my table rows and looking for another opinion on this

       
<tr>
    <td>business class flights to <b>Abu Dhabi</b><span>from <b>£1185</b></span></td>
    <td>business class flights to <b>Miami</b><span>from <b>£1365</b></span></td>
</tr>

I am basically trying to recreate the following


I thought a table would be the best way to achieve this, but what I am trying above is to get the text to appear like it does in the image.

Cheers

[mccabec123]

How close have you got it so far?

[nick2price]

Well the bold and span tags dont work directly on the table. As for the rest, I have changed it to

<table id="price-table">
        <tr>
            <td class="name">business class flights to <b>Abu Dhabi</b><span>from <b>£1185</b></span></td>
        	<td class="name2">business class flights to <b>Miami</b><span>from <b>£1365</b></span></td>
        </tr>
        <tr>
        	<td class="name">business class flights to <b>Adelaide</b><span>from <b>£2120</b></span></td>
        	<td class="name2">business class flights to <b>Moscow</b><span>from <b>£671</b></span></td>
        </tr>
</table>

#price-table{
	margin-left:-10px;
}

.name{
	border:10px solid white;
	background-color:#e9e9e9;
	height:5px;
}
.name2{
	border:10px solid white;
	background-color:#e9e9e9;
	height:5px;
}

And in the css, the height attribute doesnt have any effect.

Nick

[mccabec123]

You'll need to add cellpadding, or a margin on the 'name' class to create the spacing between the cells. Remove the span tags, they're not needed. Can you post a screenshot of how it currently looks?

[nick2price]

Currently it looks like


The problems I have at the moment is the cells being to high, I cant seem to make them smaller. Also, no formatting is applied to the text inside the cells. I added the span to try and get the text "from £1878" to the right hand side of the cell. Even the bold tag doesnt seem to work.

[mccabec123]

What browser are you using?

[nick2price]

Firefox, but I test on several. I have managed to sort out the height and changed it to the following to be more efficient

th, td {
    padding: 0px;
    border:10px solid white;
    background-color:#e9e9e9;
}

The only problem now is the text inside the cell.

Nick

[mccabec123]

The text is bold on my browser :S Have you shift refreshed your browser to clear the cache? As your browser caches CSS and and images etc, so if something is changed in the CSS it is not automatically updated.

Here's how it looks on mines:

http://screencast.com/t/LAJPf8XlNk

This post has been edited by mccabec123: 18 June 2012 - 04:42 PM

[nick2price]

Ahh, it was being overwritten by a style somewhere else, which is probably why the height isnt working aswell.

Cheers for the help