Hi Everyone,

It has been a while since I have delved into web design, and as a result many of the old tags that I have used are no longer supported within HTML5. Due to the changes I am being forced to rely upon CSS to perform tasks where I would traditionally have simply used HTML.

The the moment I have a 'simple' issue where in I would like to completely eliminate the space between a logo (on the left), and a heading (on the right).

Click Here

In the 'good old days' I would simply have used <td align="left">, for the logo, and <td align="right">, for the heading - however now (as of HTML5) I must use CSS.

I have tried a variety of CSS attributes, without success, and my code currently looks like the following -

<div class="float-left">
    <table style="background-color: #f00; border-collapse: collapse; table-layout: fixed; width: 570px;">
        <tr>
            <td>  
                <img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg" height="105" width="249">
            </td>
            <td>
                <img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg" height="105" width="321">
            </td>
        </tr>
    </table>
</div>

How can I go about eliminating the 'red gap' (background colour here is a deliberate choice!) between the logo (left) and heading (right)?

Any help will be greatly appreciated.

Kind Regards,

Davo

There are so many different ways to address this. I'm not sure that i would have used a table for this purpose, but that's fine. You could for instance apply a negative margin to the right image and that will move it over. Not really the best approach, but it will do the trick.

<img src="~/Images/sce-bpp-online.jpg" height="105" width="321" style="margin-left:-37px">

You could change the width of you table, or image. This is because you are using tables cells to display images and not just data. I would use div's and css instead.

User Firebug to test changes then apply to your code.

You'r using table, So you don't need left and right align.
For div structure you have many way to do that using float, width, text align.

Try this code and see if this has the result you are looking for:

    <div class="float-left">
        <table style="background-color: #f00; border-collapse: collapse; table-layout: fixed; width: 570px;">
            <tr>
                <td>
                    <img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg" height="105" width="249" style="float:left; display:inline;">
                </td>
                <td>
                    <img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg" height="105" width="321" style="float:right; display: inline;">
                </td>
            </tr>
        </table>
    </div>

I am doing this on my phone so I am sorry if I missed anything!