Padding Issue, please look

Hi,

All the styles are inline.

The problem is that I have given a margin to the paragraphs but it is not being recognised. you will see the problem.

http://www.travelshop247.com/mailings/newsletter.htm

Any advice would be great.

Cheers
Notting

 

try adding "display:block;" (without the quotes) to your inline-style

 

sorry... should have looked at your link before....

I don't see any margin elements in the styles? If I put in margin-left:15px for example, it works as it should...

 

Hi,

The margin are in the code. Normally of course they would be in an external stylesheet but this is to be sent by newsletter. Here is an example of code:

  <tr>
    <td background="images/4content1topbackground.gif"> <p style="margin-left:25; margin-right:15; color: white; font-size: 18px; font-weight: bold;">Recommended Products</p>
      <p style="margin-left:25; margin-right:15; color: white;"><span style="font-weight: bold;"><a href="http://www.travelshop247.com/index.php?act=viewProd&productId=14">SAKBAG AIR (Airline Tote Bag)</a></span></p>
      <p align="center" style="margin-left:25; margin-right:15; color: white;"><img src="http://www.travelshop247.com/images/uploads/Sakbag_Air.jpg" width="164" height="112"></p>
      <p align="center" style="margin-left:25; margin-right:15; color: white;">  Sakbag The Sakbag was the first Airline tote bag on the market it is the ideal accessory for any one who travelles with a backpack.</p>      <p style="margin-left:25; margin-right:15; color: white;"><a href="http://www.travelshop247.com/index.php?act=viewProd&productId=14">From Only &pound;14.99</a> </p>

      <p style="margin-left:25; margin-right:15; color: white;"><span style="font-weight: bold;"><a href="http://www.travelshop247.com/index.php?act=viewProd&productId=2">Safe Sea Jellyfish safe sun block / Sun Tan Lotion</a></span> </p>
      <p align="center" style="margin-left:25; margin-right:15; color: white;"><img src="http://www.travelshop247.com/images/uploads/safesea.gif" width="91" height="167"></p>
      <p align="left" style="margin-left:25; margin-right:15; color: white;">        Safe Sea contains unique patented ingredients that deactivate the jellyfish stinging mechanism. Applied on skin before going into infested waters, it helps protect against most jelly fish, medusa, sea lice, sea nettle and coral.</p>
      <p style="margin-left:25; margin-right:15; color: white;"><a href="http://www.travelshop247.com/index.php?act=viewProd&productId=2">Buy Now for Only &pound;10.98 </a></p>
      <p align="center" style="margin-left:25; margin-right:15; color: white; font-size:18px"><a href="http://www.travelshop247.com">View all our travel products - Visit the store Now! </a></p></td>

  </tr>

Code (markup):

Not sure why this is not working.

Thanks
Notting

 

Try adding "px" after the number.

Ex: margin-left:25px;

 

Cheers nexenator.

I have got rid of the margins and am using padding now. I am getting there with it.

I created a new table within the previous one and have added 15px padding to it. No problems. However i do not want to apply the padding to all the sides, just the left and right.

	<table width="100%"  border="0" cellpadding="15">
      <tr>
        <td><p style="color: white;"><span style="font-weight: bold;">TravelShop247.com</span> provide top quality products for travellers whether they are going on a sun blessed holiday to spain or whether they are trekking through the rainforests of Ecuador.</p>
          <p align="center" style="color: white;"> <a href="http://www.travelshop247.com">Visit the store Now! </a></p></td>
      </tr>
    </table>

Code (markup):

How can I apply the cell padding to just the left and right sides?

Thanks
Notting

 

You are better off not using any table.

try this:

<div style="background: url(put your bg-image url here) no-repeat top left;padding-left:15px;padding-right:15px">
  <p style="color: white;"><span style="font-weight: bold;">TravelShop247.com</span> provide top quality products for travellers whether they are going on a sun blessed holiday to spain or whether they are trekking through the rainforests of Ecuador.</p>
          <p align="center" style="color: white;"> <a href="http://www.travelshop247.com">Visit the store Now! </a></p>
</div>

HTML:

 

When sending marketing emails it is best to use tables over divs. Divs can play up in many email programs.

Notting

 

I've never experienced that. All webmail clients support divs as they are rendered by the browser and eudora,outlook(express) and thunderbird do a good job rendering xhtml/css. Didn't test any others yet but never had any complains when sending out div-formated mails either.

If you want to stick with the table it should still work with the inline-styles (margin and padding).
I would get rid of the cellpadding or set it to 0 though.

 

Email programs have trouble with CSS, but are usually okay with HTML of any kind.

I still haven't figured out the whole cellpadding thing. I don't know how to only have padding on the sides. When I need side padding on a real table, I add it to the td's and th's. like
table td {
padding: 0 5px;
}

Or something similar. It's worked on my tables, but they weren't nested tables or layout tables, but I think it should work the same. Then do as nex said and ditch the cellpadding.

 

Easy. Use "margin-left" and "margin-right" like this:

margin-left: 345px
etc.