CSS + XSLT problem

Hello there,

I am having some puzzling issues with the XSLT transformation / CSS layout on some of the pages on my website and i cannot figure out what is causing it

Example one is a page that displays correctly whereas example 2 clearly does not...for some reason the text is larger, the body of the page is off center, and the links appear in completely the wrong position. I cannot understand why some pages act this way and others display fine as they both use the same style sheet. I also cannot find any additional elements within the XML that would cause some pages to display with these quirks, please could somebody have a look and tell me if anything strikes you as odd?

Many thanks in advance for your help

1. http://www.onceupononline.com/search.php?wci=xml&wce=001371859

2. http://www.onceupononline.com/search.php?wci=xml&wce=001459626
mulegoatAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
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/
0
mreuringCommented:
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!
0
David S.Commented:
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.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

mulegoatAuthor Commented:
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
0
David S.Commented:
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.
0
mreuringCommented:
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!
0
mreuringCommented:
And, here you go, one test-case to proof your error is caused by self-closing divs!
I've set it up so that the div.info would display in italics, since it has no content nothing should've been italic. Then to make it even more obvious I've setup div.pricetext to display in bold and the same applies as before. I also used a space before the closing slash with the .info div, because that was a common way to make old browser not choke on xhtml, to no avail obviously.

Screenshots are attached, the result is conclusive, self-closing divs cause havoc! Even though they might be well-formed xml, they result in invalid xhtml, there is a difference and it counts...

Well-spotted kravimir, I'm not sure if I would've picked that up so quickly, even knowing that there was a dom-problem...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#testCase {
		width: 20em;
		margin: 0 auto;
	}
	.info {
		font-style: italic;
	}
	.address {
		color: blue;
	}
	.pricetext {
		font-weight: bold;
	}
	.affected {
		font-size: 1.5em;
	}
</style>
</head>
<body>
<div id="testCase">
	<div class="info" />
	<div class="address">Blv of broken dreams - NeverEverLand</div>
	<div class="pricetext"/>
	<div class="affected">
		<p>This is just a testcase...</p>
	</div>
</div>
</body>
</html>

Open in new window

error.png
correct.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mulegoatAuthor Commented:
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>

Open in new window

0
mreuringCommented:
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...
0
mulegoatAuthor Commented:
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>
   

Open in new window

0
mreuringCommented:
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
0
mulegoatAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.