I have a photo gallery website, and I'm having some difficulty getting IE to display a paragraph of text properly. It works well in Firefox 1.0, and I think my structure is valid. But, where Firefox properly wraps the text, Internet Explorer 6 refuses to wrap it at all. I'm at the point of wondering if IE has a problem in this area, or if I've missed something basic.

My xml file has the following:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../photos.xsl"?>
<photos>
    <selected code="Japanese Garden" />
    <image>
        <intro>
            The <a href="http://www.japanesegarden.com/" title="Japanese Garden site">Japanese Garden</a> in Portland is operated by
            the Japanese Garden Society of Oregon, a non-profit concern.
            If you are in the Portland area, I highly recommend a visit.
            It is a beautiful, peaceful place.
        </intro>
        <image_ID>intro</image_ID>
    </image>

    <image>
        <description>See what I mean?</description>
        <image_ID>JG_0030</image_ID>
        <category>japanese gardens</category>
        <filename>jgardens30.jpg</filename>
        <thumbnail>jgrdntn30.jpg</thumbnail>
        <contest>
            <nameyear></nameyear>
            <award code=""></award>
            <ribbon></ribbon>
        </contest>
    </image>
</photos>

The relevant sections of the xsl file:



            <div id="contentright">
                <xsl:for-each select="photos/image">
                    <xsl:choose>
                        <xsl:when test="image_ID='intro'" >
                            <div style="text-align:center;padding-left:20%;width:60%;">
                                <div id="image{image_ID}">
                                    <h5>Click a small image to the left to see a larger image here.</h5>
                                    <p style="display:block;text-align:left;">
                                        <xsl:apply-templates select="intro" />
                                    </p>
                                </div>
                            </div>
                        </xsl:when>
                    </xsl:choose>
                </xsl:for-each>
            </div>

and the templates for "intro" and "a":

<xsl:template match="intro">
    <div class="intro"><xsl:apply-templates /></div>
</xsl:template>

<xsl:template match="a">
  <xsl:copy-of select="."/>
</xsl:template>

The relevant CSS items:

div.intro {
    display: block;
    width: 100%;
    margin-top: 120px;
    padding-left: 0;
    font-size: medium;
    text-align: left;
    color: #FFF;
}

div.intro:first-letter {
    font-weight: 900;
    font-size: 150%;
}

To see the page in action, go here: http://www.kendietz.com/jgarden/japanesegarden.xml
As always, any help will be appreciated.

One thing I notice is that you're not outputting a DOCTYPE declaration, so that means IE will be in "quirks" mode. If you're trying to get some CSS to work cross-browser you really want to be in standards mode.

Try adding something like doctype-public="-//W3C//DTD HTML 4.0//EN" to your xsl:output element. That will switch IE into standards mode, then you can start to figure out what's going on with the CSS.

hth
Phil

Well, that fixed that. I've been reading about DTDs, but I've been really confused about exactly how the statement should look.

Now IE is wrapping properly, but there is an odd behavior. The entire paragraph, now properly wrapped, shifts to the left when I roll over the anchor link. This only occurs in IE. I have no positioning attributes relating to the anchor, as far as I can see. Guess that's my next puzzle.

Thanks for your help.

Yes that's a strange one. It's hard to tell whether whether its that para that moves left, or the containing div that moves right.

I can't explain it, but I can tell you that if you remove the CURSOR: pointer; line from the A:hover style the problem goes away. Maybe someone in the CSS forum can explain it!

rgds
Phil

Sorry, I was wrong, if you remove the CURSOR: pointer; *AND* all the 4 border styles from the A:hover style the problem goes away!

Wow, I never would have made that connection. My A:hover element doesn't have any border settings, though, unless they are inherited from the container.

Anyway, I'm trying to remember why I added the cursor:pointer to begin with. I think it was a troubleshooting step. I've removed it, and, as you said, the problem goes away.

Thanks for your help!