CSS + XSLT problem

Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Although Kravimirs' comment may sound harsh and you pages 'only' have warnings, it is the cause of your problem.

I quickly checked the warnings, since I run a tidy validation plugin in my browser, the warning seem harmless at the surface. But then I used firebug to quickly check the resulting DOM-tree for discrepancies and that clearly showed a big difference resulting from most likely invalid html.

On the second page, for some reason that I did not dig very deep for, the div.pricetext isn't closed correctly with as a result the whole content area being descendent of div.pricetext. Therein lies your problem... Seems you'll have to go look over your xml and or xslt!

To add to what mreuring said,  <div class="pricetext" /> is valid XHTML but (basically) is not valid HTML, so when this XHTML document is served as HTML, then the browsers will look for a nonexistent end tag.

Unfortunately, that's one error that validators don't seem to catch.

ok, so I went back to the guys who supplied me with the xslt and they say that the div is self closing and that this cannot be the cause? How do I go about checking this?

Many thanks, and apologies for the wait before the response

Probably the easiest way is to make it be not self-closing to make sure that it really doesn't make a difference.  (For the record, I disagree with them.)

The other way would be to make a minimal test case. By that I mean you make a copy of the page and then remove parts that aren't necessary to cause the issue.

I'd say the quickest test is, save complete page as... Alter the self-closing div and then see if it fixes the issues you have on the page.

Other than that, open the page, check the resulting html-structure with a DOM-walker tool (but that's what I did and that's how we came to the conclusion that the self-closing div is the cause...)

Minimal test-case could do the trick as well, I'm going to work on that actually. After all, it's two proven CSS-experts against one xslt expert ;) I feel confident I can proof our case quite easily!

That's great, thank you very much for the info

I am still waiting a response from the code provider (not very efficient I'm affraid)

Since it looks like i will not be getting any feedback from them any time soon, and seeing as i have zero xslt experience, could you please tell me what i need to do to clean up this file or is it they who need to ammend their xml?

<div class="page">
		<div class="header">
			<xsl:choose>
				<xsl:when test="//properties/@portfolio >= 1">
					<h1 class="dezrez-head">Your Portfolio</h1>
				</xsl:when>
				<xsl:otherwise>
					<h1 class="dezrez-head">Search Results</h1>
				</xsl:otherwise>
			</xsl:choose>
		</div>
		<div class="content">
			<xsl:choose>
				<xsl:when test="//properties/@total=0">
					<div class="noresults">
						Unfortunatley we have no matching properties at the moment. Please widen you search criteria and try again.
						<div><a href="javascript:window.history.back()">Return to search results</a></div>
					</div>
				</xsl:when>
				<xsl:otherwise>
					<xsl:call-template name="pages"/>
					<xsl:apply-templates select="properties"/>			
					<xsl:call-template name="pages"/>
				</xsl:otherwise>
			</xsl:choose>
		
		</div>
		<div class="footer">
		</div>
	</div>
</xsl:template>
	
	
	<xsl:template match="properties">
		<xsl:for-each select="property">
			<div class="property2">
				<div class="image">
					<a>
						<xsl:attribute name="HREF">results.php?wci=xml&amp;wce=00<xsl:value-of select="@id"/></xsl:attribute>
						<xsl:if test="@picture = 1">
							<img border="0" class="dezrez-thumb">
								<xsl:attribute name="SRC">http://www.dezrez.com/drapp/EstateAgents/<xsl:value-of select="@eid"/>/<xsl:value-of select="@ebid"/>/<xsl:value-of select="@id"/>_1t.jpg</xsl:attribute>
							</img>
						</xsl:if>
						<xsl:if test="@picture = 0 ">
							<img border="0" class="dezrez-thumb" src="http://www.dezrez.com/drapp/Images/AwaitingPhoto.jpg"/>
						</xsl:if>
						<xsl:choose>
						<xsl:when test="@ehouse = 1">
							<img border="0" class="dezrez-tour" src="http://www.dezrez.com/drapp/Images/eHousevert.gif" ALT="This property features an eHouse Virtual Tour"/>
						</xsl:when>
						<xsl:when test="@ehouse = 2">
							<img border="0" class="dezrez-tour" src="http://www.dezrez.com/drapp/Images/Hiksovert.gif" ALT="This property features an Virtual Tour Maker Virtual Tour"/>
						</xsl:when>
						<xsl:when test="@ehouse = 3">
							<img border="0" class="dezrez-tour" src="http://www.dezrez.com/drapp/Images/SmartPanoramaVert.gif" ALT="This property features an Smart Panorama Virtual Tour"/>
						</xsl:when>
						</xsl:choose>
					</a>
				</div>
				<div class="address">
					<xsl:call-template name="address"/>
				</div>
				<div class="price">
					<xsl:value-of select="@price"/>&#160;
					<span class="pricetext">
						<xsl:value-of select="pricetext"/>
					</span>
					<xsl:choose>
						<xsl:when test="//properties/@styp = 0">
						</xsl:when>
						<xsl:otherwise>
							P.C.M
						</xsl:otherwise>
					</xsl:choose>
					
									
				</div>
				<div class="rooms">
					<xsl:value-of select="@bedrooms"/>
					<xsl:choose>
						<xsl:when test="@bedrooms=1">
							Bedroom
						</xsl:when>
						<xsl:otherwise>
							Bedrooms
						</xsl:otherwise>
					</xsl:choose>
				</div>
				<xsl:choose>
					<xsl:when test="//properties/@styp = 0">
						<xsl:choose>
							<xsl:when test="@sold=2">
								<div class="stc">Sold (subject to contract)</div>
							</xsl:when>
						</xsl:choose>
					</xsl:when>
					<xsl:otherwise>
						<xsl:choose>
							<xsl:when test="@sold=2">
								<div class="stc">Let By</div>
							</xsl:when>
						</xsl:choose>
					</xsl:otherwise>
				</xsl:choose>
				<div class="description">
					<xsl:value-of select="description"/>
				</div>
				<div class="links">
					<a>
						<xsl:attribute name="HREF">results.php?wci=xml&amp;wce=00<xsl:value-of select="@id"/></xsl:attribute>
						Full Details
					</a>
				</div>
				<div style="clear:both">
				
				</div>
			</div>
		</xsl:for-each>
	</xsl:template>
	
<xsl:template name="address">
	<xsl:value-of select="sa2"/>
	<xsl:if test="(string-length(sa2)>0) and (string-length(twn)>0)">, </xsl:if><xsl:value-of select="twn"/>
	<xsl:if test="((string-length(sa2) + string-length(twn))>0) and (string-length(cty)>0)">, </xsl:if><xsl:value-of select="cty"/>.
</xsl:template>
 
<xsl:template name="pages">
	<div class="pages">
		<xsl:if test="//properties/pages/@number>1">
			Pages   
			<xsl:for-each select="//pages/page">
				<xsl:if test="@hidden=0">
				<xsl:choose>
				<xsl:when test="@selected">
					<span class="selected"><xsl:value-of select="@number"/></span>			
				</xsl:when>
		
				<xsl:otherwise>
				<a>
					<xsl:attribute name="href">javascript:document.SearchForm.PAGE.value='<xsl:value-of select="@number"/>';document.SearchForm.submit();</xsl:attribute>	
					<xsl:value-of select="@number"/>
				</a>
				</xsl:otherwise>
				</xsl:choose>
				</xsl:if>
			</xsl:for-each>
		 of <xsl:value-of select="//properties/pages/@number"/>
		</xsl:if>
	</div>
	
	<div class="return">
		<xsl:if test="//properties/@portfolio >= 1">
			<a>
				<xsl:choose>
				<xsl:when test="//properties/@gid>0">
					<xsl:attribute name="href">javascript:document.SearchForm.submit();</xsl:attribute>
					Return
				</xsl:when>
				<xsl:otherwise>
					<xsl:attribute name="href">javascript:window.history.back();</xsl:attribute>
					Back 
				</xsl:otherwise>
				</xsl:choose>
			</a>
		</xsl:if>
		<xsl:if test="//properties/portfolio/@count>0 and //properties/@portfolio = 0">
			
			<a>
				<xsl:attribute name="href">javascript:document.SearchForm.IsPortfolio.value='1';document.SearchForm.submit();</xsl:attribute>		
				Your Portfolio (<xsl:value-of select="//properties/portfolio/@count"/>)
			</a>
		</xsl:if>
	</div>
</xsl:template>
 
	
</xsl:stylesheet>

Select allOpen in new window

Either something else is processing your results, or the xslt you've sent is not the one in use right now. The resulting html from your linked pages has a <div class="pricetext"/> but the xslt you've posted generates a span, not a div! Admittedly, my xslt skills are not strong, but I can read them well enough to know that there is a mismatch here...

ooops, sorry! Wrong file

<?xml version="1.0" encoding="windows-1252" ?><!-- DWXMLSource="http://data.dezrez.com/search.asp?wci=xml&wce=0" -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="windows-1252"/>
 
<div class="info">
</div>
<div class="back">
<a href="javascript:window.history.back()">Return to search results</a>
</div>
<div class="address">
<xsl:apply-templates select="//property/address"/>	
</div>
<div class="pricetext">
<xsl:value-of select="//property/text/pricetext"/>
		</div>
		<xsl:choose>
			<xsl:when test="//property/@price&lt;500">
				<div class="price">
						<xsl:choose>
							<xsl:when test="//property/@poa='True'">
								P.O.A.
							</xsl:when>
							<xsl:otherwise>
								&#163;<xsl:value-of select="format-number(//property/@price * 30.41667, '###,###,###')"/> P.C.M.
							</xsl:otherwise>
						</xsl:choose>
				</div>
				<xsl:if test="//property/@status=2">
					<div class="stc">Let By</div>
				</xsl:if>
			</xsl:when>
			<xsl:otherwise>
				<div class="price">
						<xsl:choose>
							<xsl:when test="//property/@poa='True'">
								P.O.A.
							</xsl:when>
							<xsl:otherwise>
								&#163;<xsl:value-of select="format-number(//property/@price, '###,###,###')"/>
							</xsl:otherwise>
						</xsl:choose>
				</div>
				<xsl:if test="//property/@status=2">
					<div class="stc">Sold (subject to contract)</div>
				</xsl:if>
			</xsl:otherwise>
		</xsl:choose>
		 
    <div class="page">
    <div class="description2">
			<ul>
				<xsl:call-template name="des">
							<xsl:with-param name="stringin" select="//property/text/description2"/>						
				</xsl:call-template>
			</ul>
		</div>
	</div>
   
	<div class="image">
		<div class="mainimage" id="mainimage">
			<xsl:choose>
				<xsl:when test="//property/pictures/picture">
					<xsl:for-each select="//property/pictures/picture">
						<xsl:if test="@id=1">
							<img id="PICTURE1">
								<xsl:attribute name="src">
									<xsl:value-of select="."/>&amp;width=530&amp;rotation=0
								</xsl:attribute>
							</img>
						</xsl:if>
					</xsl:for-each>
				</xsl:when>
				<xsl:otherwise>
					<div class="mainImage">
						<img src="http://www.dezrez.com/drapp/estateAgents/Images/AwaitingPhoto.jpg" width="540"/>
					</div>
				</xsl:otherwise>
			</xsl:choose>
		</div>
		<div class="thumbs">
		<xsl:if test="//property/pictures/picture">
				<div id="thumbs">
					<xsl:for-each select="//property/pictures/picture">
						<xsl:choose>
							<xsl:when test="@id !=10">
								<a>
									<xsl:attribute name="href">javascript:imageHandler.swapImage(<xsl:value-of select="@id - 1"/>)</xsl:attribute>
									<img>
										<xsl:attribute name="id">PICTURE<xsl:value-of select="@id"/></xsl:attribute>
										<xsl:attribute name="src"><xsl:value-of select="."/>&amp;width=530&amp;rotation=0</xsl:attribute>
									</img>
								</a>
							</xsl:when>
							<xsl:when test="@id = 10">
								<img style="display:none;">
									<xsl:attribute name="id">PICTURE<xsl:value-of select="@id"/></xsl:attribute>
								</img>
							</xsl:when>
						</xsl:choose>
					</xsl:for-each>
					<div style="clear:left"></div>
				</div>
			</xsl:if>
	</div>
	</div>
	
	
	<div class="links">
		<a onclick="javascript:return newWindow(this.href, 600, 600)">
			<xsl:attribute name="href">
				http://www.dezrez.com/DRApp/Request.ASP?EntryName=viewing%20of&amp;EntryType=242&amp;PropertyID=<xsl:value-of select="//property/@id"/>&amp;PropAddress=<xsl:apply-templates select="//property/address"/>&amp;origin=<xsl:value-of select="//property/@eid"/>
			</xsl:attribute>Request Viewing</a>
		<a onclick="javascript:return newWindow(this.href, 600, 600)">
			<xsl:attribute name="href">
				http://www.dezrez.com/DRApp/Request.ASP?EntryName=a%20brochure%20of&amp;EntryType=32&amp;PropertyID=<xsl:value-of select="//property/@id"/>&amp;PropAddress=<xsl:apply-templates select="//property/address"/>&amp;origin=<xsl:value-of select="//property/@eid"/>
			</xsl:attribute>Request a Brochure</a>
		<a onclick="javascript:return newWindow(this.href, 600, 600)">
			<xsl:attribute name="href">
				http://www.dezrez.com/DRApp/Request.ASP?EntryName=telephone%20call%20back%20about&amp;EntryType=220&amp;PropertyID=<xsl:value-of select="//property/@id"/>&amp;PropAddress=<xsl:apply-templates select="//property/address"/>&amp;origin=<xsl:value-of select="//property/@eid"/>
			</xsl:attribute>Request Call Back</a>
		<xsl:if test="//property/@metropix!=0">
		  <a id="floorplan" onclick="javascript:return newWindow(this.href, 800, 600)" style="margin:5px;color:#CECFCE;text-decoration:none;" href="#" onmouseover="javascript:rollOver(this, 2);" onmouseout="javascript:rollOver(this,2)">
			<xsl:attribute name="href">http://content.metropix.com/mtpix/p/<xsl:value-of select="//property/@metropix"/>f.aspx.aspx</xsl:attribute>View Floorplan</a>
		</xsl:if>
		
		<div style="clear:both"></div>
	</div>
	<div class="descriptions">
		<p class="description1">
			<xsl:call-template name="des2">
				<xsl:with-param name="stringin" select="//property/text/description1"/>						
			</xsl:call-template>
		</p>
		<p class="floors">
			<xsl:apply-templates select="//property/text/area"/>
		</p>
	</div>
	<div class="map">
			<div id="map">
		</div>
	</div>
    <div class="footer">
		<h3>Misrepresentation Act 1967</h3>
		These particulars are believed to be correct but their accuracy is not guaranteed nor do they form part of any contract.
	</div>
	<p>
    </p>
   </xsl:template>
   

Select allOpen in new window

Well, the xslt is fine, it is supposed to generate div's that are full elements (not self-closing). Thus, the only conclusion is that something in your process of forming html decides to make empty elements into self-closing elements.

I did a quick search on google, but the material at hand is beyond my expertise. Seems that some of the transformation results can be tweaked in the xslt, I suppose that the language/library used to perform the transformation may also influence it. Whichever way is required is beyond me, the xslt-code writes the tags complete (not self-closing) so it's tweaking of the settings/transformer that is required.

That's all I know :) Perhaps you'd be served well by rephrasing and asking a new question. You now know the cause of your problem, all that you need is a way to resolve it...

Cheers,

 Martin

hello there, turns out the people entering information onto the software were leaving the pricetext filed blank thus causing the transformation (i've spent literally weeks on this problem thinking it was something to do with the css and xslt itself, its not, its just plain old human error - i asked them many times over if there were any discrepencies with their data, always 'no'...anyway problem solved finally, thank you for all your help with this