PDA

View Full Version : HTML eflyer problem



Shoulkian
28 Nov 2010, 03:43 PM
I have a problem with IE compatibility - I have a simple eflyer comprised of 4 images, of which 1 is coded to link to the website and then the second is a mailto link.

The first linked image is flush to the others, but the mailto linked image appears in hotmail/gmail in IE with a white line above the image. I have moved from table to div, I have style="vertical-align:bottom; display: block;" in place to ensure they appear flush (which subsequenly fixed the other images, which initially did the same), but I cannot seem to fix this compatibility problem.

Everything appears fine in Safari on OS X, Chrome on Win7 but IE8 and lower show this white space which breaks up the image...

When I remove the mailto link, the space disappears - I have no idea why this is happened

Code is below;

<div id="01" width="550" height="1437" border="0" cellpadding="0" cellspacing="0">


<img style="vertical-align:bottom; display: block;" src="http://www.mbvfitness.com/eflyer/images/mbv-email_01.jpg" width="550" height="1219" hspace="0">

<a href="http://www.mbvfitness.com/">
<img style="vertical-align:bottom; display: block;" src="http://www.mbvfitness.com/eflyer/images/mbv-email_02.jpg" width="550" height="41" border="0" hspace="0"></a>

<img style="vertical-align:bottom; display: block;" src="http://www.mbvfitness.com/eflyer/images/mbv-email_03.jpg" width="550" height="33" border="0" hspace="0">

<a href="mailto:infoatmbvfitness.com">
<img style="vertical-align:bottom; display: block;" src="http://www.mbvfitness.com/eflyer/images/mbv-email_04.jpg" width="550" height="14" border="0" hspace="0"></a>

<img style="vertical-align:bottom; display: block;" src="http://www.mbvfitness.com/eflyer/images/mbv-email_05.jpg" width="550" height="130" hspace="0">

</div>

White line appears above the italic code - the links are active, so if this is copied into a new page, it should display as I'm seeing this.

I wouldn't normally be overly concerned, but Im afraid that as this is an eFlyer, I want everyone to be able to view this seemlessly irrelevant of brower and mail provider.

Any help with this would be very much appreciated - I'm self taught, so its something probably glaringly obvious, but I cant find any resources online which address this issue - As previously stated, the vertical-align fixed the white spaces between all other images.

Thanks