CSS prob

[Khayman]

trying to replicate the following using CSS (so easy in tables)

<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/leftbar.png" width="68" height="20" ></td>
<td style="background-color:#2E2B24;" width="100%" height="20"></td>
<td><img src="images/rightbar.png" width="76" height="20"></td>
</tr>
</table>

so basicaly i want <picture><row of colour><picture>

I can get it mostly working but the colour row spans underneath the pictures, and part of the pictures are transparent. i need the colour row to star and stop at the end/begining of each picture (and all to be inline)

 

[Geffy]

nice cheat way

.table { display:table; }
.table .tr { display:table-row; }
.table .tr .td { display:table-cell; }

then just replace the normal <table> <tr> <td> with <div class="table"> <div class="tr"> <div class="td"> respectively

what you can do though is

<img src="my.picture.jpg" alt="My Picture" class="picture1">
<img src="my.picture2.jpg" alt="My Picture2" class="picture2">

.picture1 { border-right:5px solid #2E2B24; }