Widget icons and text inline not working

  • HI,

    I’ve got a test site i’m trying to get images and text inline with each other and not over lapping or weird spaces between.

    can be seen here https://www.1st-comms.co.uk/test-site/

    the code im using is 

    <table style="height: 496px;" width="100%">
<tbody>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/Contact.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Contact us</h4>
<span style="color: #000000; font-size: 10px;">Ask us a question</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/recycle.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Refurbished Products</h4>
<span style="color: #000000; font-size: 10px;">Refurbished products available</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/Corpaccount.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Business Account</h4>
<span style="color: #000000; font-size: 10px;">Open an account with us today</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/info-1.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Buyers Guide</h4>
<span style="color: #000000; font-size: 10px;">A guide to help you choose</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/gaseletric.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Utilities</h4>
<span style="color: #000000; font-size: 10px;">Great rates for Gas and Electric</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/Networkservices.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Network Services</h4>
<span style="color: #000000; font-size: 10px;">Broadband lines, Calls ask us</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/quote-1.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px; text-align: left;">Request a quote</h4>
<span style="color: #000000; font-size: 10px;">Need a quote for you business</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/repair.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: left;">
<h4 style="font-size: 12px; margin-top: 0px; text-align: left;">Repair and Refurbishment Service</h4>
<span style="color: #000000; font-size: 10px;">Want to keep your equipment working</span></td>
</tr>
<tr style="text-align: left;">
<td><img style="float: left;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/warranty.png" alt="" width="36" height="36" /></td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Warranty and Returns</h4>
<span style="color: #000000; font-size: 10px;">Returns and Warranty information</span></td>
</tr>
<tr>
<td style="text-align: left;">
<p><img style="float: left; margin: 0 15px 0 0;" src="https://www.1st-comms.co.uk/test-site/wp-content/uploads/2017/03/water.png" alt="" width="36" height="36" /></p>
</td>
<td style="line-height: 0.1px; text-align: justify;">
<h4 style="font-size: 12px; margin-top: 0px;">Water Rates</h4>
<span style="color: #000000; font-size: 10px;">Great Water rates to your business</span></td>
</tr>
</tbody>
</table>

    Any help in trying to sort this will be fantastic.

Viewing 1 replies (of 1 total)

  • First of all you are using non responsive tables…

    Second of all your styles are inline…

    Are you the webmaster for this site or the owner?

    Here is your css code to put in separate file:

    `#table_5669_0{height: 496px;}
    #tr_5669_0{text-align: left;}
    #img_5669_0{float: left;}
    #td_5669_0{line-height: 0.1px; text-align: justify;}
    #h4_5669_0{font-size: 12px; margin-top: 0px;}
    #span_5669_0{color: #000000; font-size: 10px;}
    #tr_5669_1{text-align: left;}
    #img_5669_1{float: left;}
    #td_5669_1{line-height: 0.1px; text-align: justify;}
    #h4_5669_1{font-size: 12px; margin-top: 0px;}
    #span_5669_1{color: #000000; font-size: 10px;}
    #tr_5669_2{text-align: left;}
    #img_5669_2{float: left;}
    #td_5669_2{line-height: 0.1px; text-align: justify;}
    #h4_5669_2{font-size: 12px; margin-top: 0px;}
    #span_5669_2{color: #000000; font-size: 10px;}
    #tr_5669_3{text-align: left;}
    #img_5669_3{float: left;}
    #td_5669_3{line-height: 0.1px; text-align: justify;}
    #h4_5669_3{font-size: 12px; margin-top: 0px;}
    #span_5669_3{color: #000000; font-size: 10px;}
    #tr_5669_4{text-align: left;}
    #img_5669_4{float: left;}
    #td_5669_4{line-height: 0.1px; text-align: justify;}
    #h4_5669_4{font-size: 12px; margin-top: 0px;}
    #span_5669_4{color: #000000; font-size: 10px;}
    #tr_5669_5{text-align: left;}
    #img_5669_5{float: left;}
    #td_5669_5{line-height: 0.1px; text-align: justify;}
    #h4_5669_5{font-size: 12px; margin-top: 0px;}
    #span_5669_5{color: #000000; font-size: 10px;}
    #tr_5669_6{text-align: left;}
    #img_5669_6{float: left;}
    #td_5669_6{line-height: 0.1px; text-align: justify;}
    #h4_5669_6{font-size: 12px; margin-top: 0px; text-align: left;}
    #span_5669_6{color: #000000; font-size: 10px;}
    #tr_5669_7{text-align: left;}
    #img_5669_7{float: left;}
    #td_5669_7{line-height: 0.1px; text-align: left;}
    #h4_5669_7{font-size: 12px; margin-top: 0px; text-align: left;}
    #span_5669_7{color: #000000; font-size: 10px;}
    #tr_5669_8{text-align: left;}
    #img_5669_8{float: left;}
    #td_5669_8{line-height: 0.1px; text-align: justify;}
    #h4_5669_8{font-size: 12px; margin-top: 0px;}
    #span_5669_8{color: #000000; font-size: 10px;}
    #td_5669_9{text-align: left;}
    #img_5669_9{float: left; margin: 0 15px 0 0;}
    #td_5669_10{line-height: 0.1px; text-align: justify;}
    #h4_5669_9{font-size: 12px; margin-top: 0px;}
    #span_5669_9{color: #000000; font-size: 10px;}

Viewing 1 replies (of 1 total)
  • The topic ‘Widget icons and text inline not working’ is closed to new replies.