I'm trying to style an ordered list and it seems to work everywhere (well, not tested yet in Outlook) but Hotmail. The OL is inside a table cell directly to the right of another table cell. Instead of the numbers lining up at the far left of the OL's cell, the text is, and the numbers are overlapping - as if there's a negative left margin.
Here's a sample section of code:
<tr> <td width="25" bgcolor="#cc6600"><img src="spacer.gif" width="25" /></td> <td valign="top" align="left" width="215"> <ol style="padding:0;margin:0 0 0 1.4em;list-style-position:outside;"> <li style="padding:0 0 5px 0;margin:0;"><a href="">Hike in the Mountains</a></li> <li style="padding:0 0 5px 0;margin:0;"><a href="">Relax at a Spa</a></li> <li style="padding:0 0 5px 0;margin:0;"><a href="">Savour delicious food and wine</a></li> <li style="padding:0 0 5px 0;margin:0;"><a href="">Cruise the coast</a></li> <li style="padding:0;margin:0;"><a href="">Paddle the Rainforest</a></li> </ol> </td> </tr>
Has anyone got a solution for this?
Just tested in Outlook and it only seems to be a Hotmail issue...
Without getting my hands dirty in the code, I would suggest looking back to the cells you've setup, as it seems to originate there, rather than your list itself. You may just need to specify a blank cell in between the two cells to create the margin you're after.
Sorry fyredefyre, that would create too much space. I'm guessing that this just isn't possible in Hotmail then?
You might also try using pixels instead of EMs, and changing the list-style-position:outside; to other values to see if you can get the rendering to perform differently.
This is a trial and error type situation I'm afraid, not something we've specifically seen before.
Thanks for the pixels tip, I'll try that. I did try outside but no luck. I figured it wasn't something that was common since I found nothing on a Google search. Thanks again!