Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

image gap

Posted on 2007-07-28
5
Medium Priority
?
625 Views
Last Modified: 2013-11-18
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.
0
Comment
Question by:vbnewbie01
  • 2
4 Comments
 
LVL 13

Expert Comment

by:R7AF
ID: 19587526
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"/>
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 19598078
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.
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 19665302
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/
0
 
LVL 1

Accepted Solution

by:
Vee_Mod earned 0 total points
ID: 19683039
Closed, 50 points refunded.
Vee_Mod
Community Support Moderator
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question