Hi Ciprian,

Curious, how are you viewing the HTML output? Which web-browser? I'm guessing its via Chrome's Developer Tools?

Try viewing the raw HTML via view-source - or a different web-browser?

My thinking is that Chrome might not like that you've wrapped an inline tag <a> around a block-level tag (like <div> or <h3>) so it trying to re-render the HTML accordingly.  But that's just a guess!

Cheers, Lee.

Thanks for the reply Lee!

This error only appears in Mozilla Firefox and it causes pretty nasty layout problems. If I try to look at the source via View Source everything's fine, but the layout problem is still there. The only way to really see it is to save the page by Save Page As... and then looking at the source.

The odd thing is that this is in a for-each and there are more than one elements like this one on a page. Only one of them gets messed up like this and it's only once in a while.

Any ideas?

Ciprian

I solved the issue. The thing was that I was calling a template from the macro and aparently sometimes it didn't parse the XML properly into HTML and this caused the problem.

I changed the output of the template from XML to HTML and the problem stopped.

Should this be reported as a bug?

Hi Ciprian,

It's not a bug.  It sounds like part of the content was missing - and it self-closed a tag... which is perfectly valid XML, but not valid (x)HTML (depending on the tag).

By changing the output from XML to HTML, you have resolved that issue because the empty tag does not self-close.  Keep in mind that if you need to use valid self-closing tags (like <img/>, <hr/>, <br/>), then those might render incorrectly ... i.e. <img></img>

Usually the way we get around the empty/self-closing tags is to insert a HTML comment into it, i.e.

<p>
    <xsl:value-of select="shortDescription" />
    <xsl:comment />
</p>

So that will render as <p><!----></p> instead of <p/> ... which would make most web-browsers bork!

Cheers, Lee.

Hey,

But that's the thing, the <a> tag was never empty. There was always content in it and in stead of just closing it once it actually put it inside of all the tags it was supposed to contain.

So from something like this:

<a>
  <h3>Title</h3>
  <p>Stuff</p>
</a>

it went to this:

<a></a>
  <h3>
    <a>Title</a>
  </h3>
<p>
  <a>Stuff></a>
</p>

Thanks,

Ciprian

Hi Ciprian,

Just noticed this... what's going on in the "Image" template? From when you call:

<xsl:call-template name="Image"> ...

It appears to not be closing the <img> tag?

<img src="does%20work_files/ImageGen.jpg">

Which is fine for HTML 4 ... but if Firefox is expecting XHTML, then it might try to compensate and render those additional <a> tags? (I'm guessing a bit here)

Is your website publicly available? I wouldn't mind taking a little look at the HTML myself.

Cheers, Lee.

Here's the code to the Image macro:

<xsl:output method="html" omit-xml-declaration="yes"/>
    
<xsl:template name="Image">
  <xsl:param name="imgAlias"/>
  <xsl:param name="imgWidth"/>
  <xsl:param name="imgHeight"/>

<xsl:param name="currentPage"/>

<!-- start writing XSLT -->
<xsl:variable name="imageAlias">
  <xsl:value-of select="$imgAlias" />
</xsl:variable>
<xsl:variable name="Width">
  <xsl:value-of select="$imgWidth" />
</xsl:variable>
<xsl:variable name="Height">
  <xsl:value-of select="$imgHeight" />
</xsl:variable>

  <xsl:variable name="media">
    <xsl:value-of select="$currentPage/*[name() = $imageAlias]"/>
  </xsl:variable>
  <img>
    <xsl:attribute name="src">
      <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
      <xsl:value-of select="$media"/>
      <xsl:if test="$Width !=''">
        <xsl:text>&amp;width=</xsl:text>
        <xsl:value-of select="$Width"/>
      </xsl:if>
      <xsl:if test="$Height !=''">
        <xsl:text>&amp;height=</xsl:text>
        <xsl:value-of select="$Height"/>
      </xsl:if>
    </xsl:attribute>
  </img>

</xsl:template>

It uses imagegen to resize an image based on recived height, width and alias.

You can see the page here: http://nksplit.mplus.hr/arhiva.aspx I put the output method of Image template back to xml so if you play with the 1, 2 buttons for a while you will see a layout problem in mozilla.

Thanks a bunch,

Ciprian

Hey Ciprian, just tried paging between the 1, 2 paging buttons for a while - but didn't get to see any errors.

Not sure if it makes a difference, but I'm using Firefox 3.6.10.

Cheers, Lee.

I've been trying it too and no difference, it just went away... I don't get it.

I have the same version of Firefox.

Maybe changing the output method from xml to html and back did something, maybe it was cached somewhere.

Well thanks for the help, it's good that it's gone. I just hope it doesn't show up anymore.

Ciprian

Back to this again.. I took over from Ciprian and now again ran into same problem. It's driving me mad. Website is almost done and client noticed the same issue again.

To reproduce it go to: http://nksplit.mplus.hr/arhiva.aspx and use paging to browse news one by one. It is almost certain that you will not get by page 10 before problem appears. You will notice it by looking at thumbnails of 4 news on a page - usually last one drops down below frame and title/text next to it is nov visible anymore. Click view/source or use firebug and you'll notice that A tag is opened and closed mayn times instead of only once. Now, just click refresh in your browser and it is gone! Next time error is on some other page.

I managed to reproduce it only in Firefox, but several older version and latest one too.

Going crazy here. Same thing is now happening on another place (http://nksplit.mplus.hr/galerija.aspx). Also, changing output to HTML as mentioned above does not help anymore.

Further, inspecting code with firebug now showed me that A tag was once even given class "_moz-rs-heading"!? Ther's no class lik ethat anywhere in my code. Firefox is just behaving very strange with XSL outpu. Further investigation of this showed me link with explanation of Firefox behaviour when A tak wraps arround HTML5 element (http://oli-studio.com/bugs/mozilla/block-level-links.html) but I'm not wrapping HTML5 element but HTML4 element.

we redesigned it and overlayed A over DIV:

<div class="ShortNews">
  <a href="something.aspx">&nbsp;</a>
  <div class="ImgHolder">
    <img src="something.gif" />
  </div>
  <h3>Title goes here </h3>
  <p class="Date">03.11.2010 </p>
  <p>Content goes here</p>
</div>

instead of:

<div class="ShortNews">
  <a href="something.aspx">
    <div class="ImgHolder">
      <img src="something.gif" />
    </div>
    <h3>Title goes here </h3>
    <p class="Date">03.11.2010 </p>
    <p>Content goes here</p>
  </a>
</div>

... with some CSS that makes A a display:block and overlay completze DIV, so onMouseOver DIV changes background color. This is solved. Ciprian plese mark this thread solved.

is working on a reply...