asked on

image gap

hey there; i have the following xslt:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="Header">
<table style="width:745px; height:85px;" border="0" cellpadding="0" cellspacing="0" background="{ImagePath}header_bkg.jpg">
<tr>

<td style="vertical-align:top; background-color:red; width:72px;">
<table style="width:72px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="{ImagePath}test.jpg" width="72" height="3"/>
</td>
</tr>
</table>
</td>

</tr>
</table>
</xsl:template>
</xsl:stylesheet>

this displays fine, however, in firefox, there is a large gap above the test.jpg (i.e. the image is not flush against the top). if i remove the image and just use text instead, it lines up against the top perfectly.

what am i missing that i missing that there is this gap between the top and the image?

thanks all.

R7AF

1) Why are you using the nested table, with only one cell in it, just the image? Why are you using a table at all? Is this all there is in this table? If so, you better use a div.
2) What doctype do you use? Post the complete html here if possible (with body tag etc).

NB: you can specify a doctype like this:
<xsl:output doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"/>

vbnewbie01

ASKER

R7AF; thanks for your response.

i don't think using a table is the issue. like i said, text in the cell lines up perfectly ... it's just when i add an image there is a gap.

here is the xslt:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="AgentHeaderFooter">
<table style="width:745px; height:85px;" border="0" cellpadding="0" cellspacing="0" background="{ImagePath}header_bkg.jpg">
<tr>
<td style="width:72px; height:85px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="{ImagePath}header_C1_R1.jpg" width="72" height="3"/>
</td>
</tr>
<tr>
<td>
<img src="{ImagePath}header_C1_R2.jpg" width="3" height="79"/>
</td>
<td style="background-color:#ffffff;">
<img src="{AgentPhoto}" width="66" height="79"/>
</td>
<td>
<img src="{ImagePath}header_C3_R2.jpg" width="3" height="79"/>
</td>
</tr>
<tr>
<td colspan="3">
<img src="{ImagePath}header_C1_R3.jpg" width="72" height="3"/>
</td>
</tr>
</table>
</td>

<td style="width:100%; height:85px;">
<table width="100%" height="85" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:center; padding:0px 10px 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<xsl:if test="string(LastName)">
<h1 style="font-family:Arial, Helvetica, sans-serif; font-size: 25px; color:#ffffff; line-height:18px; font-weight:bold; text-decoration:none; padding:5 0 5 0; margin:0; height: 1em; filter: Shadow(Color=#313131, Direction=140, Strength=1);">
<xsl:variable name="FName" select="FirstName" />
<xsl:variable name="LName" select="LastName" />
<xsl:value-of select="concat($FName, ' ', $LName)"/>
</h1>
</xsl:if>

<div style="background-image:url({ImagePath}dash.gif); background-repeat:repeat; height:1px;">
<img src="{ImagePath}clear_1_1.gif" width="1" height="1"/>
</div>

<div style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; padding:5 0 0 0; height: 1em; filter: Shadow(Color=#313131, Direction=140, Strength=1);">
<xsl:if test="string(AgentTitle)">
<xsl:value-of select="AgentTitle"/> -
</xsl:if>

<xsl:if test="string(OfficeName)">
<xsl:value-of select="OfficeName"/>
</xsl:if>
</div>

<xsl:if test="string(TagLine)">
<div style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:13px; padding:5 0 0 0; font-style:italic; text-align:left; height: 1em; filter: Shadow(Color=#313131, Direction=140, Strength=1);">
<xsl:value-of select="TagLine"/>
</div>
</xsl:if>
</td>
</tr>
</table>
</td>

<td align="right" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:10px 10px 0px 0px; text-align:right; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;">
<xsl:if test="string(OfficePhone)">
Office:
<xsl:value-of select="OfficePhone"/>
<br/>
</xsl:if>

<xsl:if test="string(MobilePhone)">
Cell:
<xsl:value-of select="MobilePhone" />
<br/>
</xsl:if>

<xsl:if test="string(OfficeFax)">
Fax:
<xsl:value-of select="OfficeFax"/>
</xsl:if>

<div style="margin:10px 0px 0px 0px; font-weight:bold;">
<xsl:if test="string(Email)">
<a style="color:#ffffff;" HREF="mailto:{Email}">
<xsl:value-of select="Email"/>
</a>
</xsl:if>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>

and a sample XML:

<AgentHeaderFooter>
<ImagePath>images/</ImagePath>
<AgentPhoto>images/photo_default.jpg</AgentPhoto>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
<AgentTitle>Broker</AgentTitle>
<OfficeName>Century 21</OfficeName>
<TagLine>Your Home My Priority</TagLine>
<OfficePhone>(555) 555-1212</OfficePhone>
<MobilePhone>(555) 555-2222</MobilePhone>
<OfficeFax>(555) 555-3333</OfficeFax>
<Email>john@foo.com</Email>
</AgentHeaderFooter>

i've also tried specifying the doc type and that doesn't resolve anything.

thanks again.

vbnewbie01

ASKER

i found the following solution to my issue ... resetting the styles:

<STYLE TYPE="text/css">

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
      outline: 0;
}
body {
      line-height: 1;
      color: black;
      background: white;
}
ol, ul {
      list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
      border-collapse: separate;
      border-spacing: 0;
}
caption, th, td {
      text-align: left;
      font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
      content: "";
}
blockquote, q {
      quotes: "" "";
}

</STYLE>

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

ASKER CERTIFIED SOLUTION

Vee_Mod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial