Jump to content

Previewing xml page in browser

yldziner

By yldziner
in XML

Recommended Posts

yldziner Newbie

yldziner

Posted
Posted

I have an xsl page that has been linked to an xml file. When the xml is previwed in the browser the rollover buttons do not work as they do in the browser preview of the xsl page. Why is that?XML FILE:<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="builders.xsl" type="text/xsl"?><style> (intro_text> <header>Ready To Rebuild</header> <body> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam volutpat ipsum non ante. In eget leo non lectus pulvinar lacinia. Morbi tincidunt tempus mi. Duis lacinia, tellus sit amet volutpat vulputate, est pede nonummy nisl, at porta augue orci vel tortor. Nulla facilisi. Proin blandit convallis enim. Nullam ligula turpis, venenatis a, gravida nec, lobortis ut, quam. Cras elit risus, pharetra sed, pellentesque vitae, dictum sit amet, turpis. Donec metus ligula, tempor vitae, accumsan vitae, rhoncus id, enim. Vivamus metus ipsum, imperdiet at, ullamcorper ut, dictum quis, lorem. Vestibulum lectus lorem, fringilla sed, aliquam id, mattis eu, augue. Maecenas lacinia nunc eu ligula viverra rhoncus. Sed ut erat. Integer accumsan. Nunc pharetra. Duis id erat eget tortor ullamcorper tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </body> (/intro_text> <list_item id="1"> <imgsrc>images/test_image.jpg</imgsrc> <year>2007</year> <make>BMW</make> <model>535i</model> <title>Salvage</title> <price>$15,000</price> </list_item> <list_item id="2"> <imgsrc>images/test_image.jpg</imgsrc> <year>2007</year> <make>Mercedes Benz</make> <model>300C</model> <title>Salvage</title> <price>$11,000</price> </list_item> <list_item id="3"> <imgsrc>images/test_image.jpg</imgsrc> <year>2001</year> <make>BMW</make> <model>M5</model> <title>Salvage</title> <price>$25,000</price> </list_item> <list_item id="4"> <imgsrc>images/test_image.jpg</imgsrc> <year>1997</year> <make>Toyota</make> <model>Corolla</model> <title>Salvage</title> <price>$4,500</price> </list_item></style>- - - -XSL FILE:<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="builders.xml" --><!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> <!ENTITY copy "©"> <!ENTITY reg "®"> <!ENTITY trade "™"> <!ENTITY mdash "—"> <!ENTITY ldquo "“"> <!ENTITY rdquo "”"> <!ENTITY pound "£"> <!ENTITY yen "¥"> <!ENTITY euro "€">]><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html" encoding="ISO-8859-1" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/><xsl:template match="/"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>SalvageGold.com ::: Salvaged Cars For Sale in Southern California</title><style media="all">body { text-align:center; background-image: url(images/bg_tile.jpg);}</style><script language="JavaScript" type="text/javascript"><xsl:text disable-output-escaping="yes"><![CDATA[window.resizeTo(1016,748)// width,height]]></xsl:text></script><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><script type="text/javascript"><xsl:comment><xsl:text disable-output-escaping="yes"><![CDATA[function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//]]></xsl:text></xsl:comment></script><link href="sg_style.css" rel="stylesheet" type="text/css" /><style type="text/css"><xsl:comment>.style3 {color: #663300}a:link { text-decoration: none;}a:visited { text-decoration: none;}a:hover { text-decoration: none;}a:active { text-decoration: none;}.style4 {color: #CCCCCC}</xsl:comment></style></head><body onload="MM_preloadImages('images/index_rollover_07.jpg','images/index_rollover_08.jpg','images/index_rollover_09.jpg','images/index_rollover_10.jpg','images/index_rollover_11.jpg','images/index_rollover_12.jpg','images/index_rollover_13.jpg','images/index_rollover_14.jpg')"><!-- ImageReady Slices (salvagegold.psd - Slices: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 19) --><table width="1000" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <!--DWLayoutTable--> <tr> <td width="1000" height="339" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/background_01.jpg"> <!--DWLayoutTable--> <tr> <td width="101" height="300"> </td> <td width="249"> </td> <td width="60"> </td> <td width="81"> </td> <td width="84"> </td> <td width="80"> </td> <td width="57"> </td> <td width="51"> </td> <td width="57"> </td> <td width="81"> </td> <td width="99"> </td> </tr> <tr> <td height="39"> </td> <td valign="top"> <a href="newsletter.html"><img src="images/news_06.jpg" alt="" width="249" height="39" border="0" /></a></td> <td valign="top"> <a href="home.xml"><img src="images/index_07.jpg" alt="" width="60" height="39" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/index_rollover_07.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <a href="about.xml"><img src="images/index_08.jpg" alt="" width="81" height="39" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/index_rollover_08.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <img src="images/index_rollover_09.jpg" alt="" width="84" height="39" border="0" /></td> <td valign="top"> <a href="sale.xml"><img src="images/index_10.jpg" alt="" width="80" height="39" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','images/index_rollover_10.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <a href="sold.xml"><img src="images/index_11.jpg" alt="" width="57" height="39" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','images/index_rollover_11.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <a href="faq.xml"><img src="images/index_12.jpg" alt="" width="51" height="39" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','images/index_rollover_12.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <a href="links.xml"><img src="images/index_13.jpg" alt="" width="57" height="39" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','images/index_rollover_13.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td valign="top"> <a href="contact.xml"><img src="images/index_14.jpg" alt="" width="81" height="39" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','images/index_rollover_14.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td> <td> </td> </tr> </table> </td> </tr> <tr> <td height="282" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/background_02.jpg"> <!--DWLayoutTable--> <tr> <td width="101" height="52"> </td> <td colspan="3" valign="top" bgcolor="#FFFFFF" class="margin"><div align="center"> <p align="left" class="title">BUILDERS INVENTORY</p> </div></td> <td width="99"> </td> </tr> <tr> <td height="77"> </td> <td width="71"> </td> <td width="661"> </td> <td width="68"> </td> <td> </td> </tr> <tr> <td height="22"> </td> <td> </td> <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#660000"> <!--DWLayoutTable--> <tr> <td width="142" height="22" valign="top" bgcolor="#660000"><div align="center" class="inventory_header">PICTURE</div></td> <td width="83" valign="top" bgcolor="#660000"><div align="center" class="inventory_header">YEAR</div></td> <td width="114" valign="top"><div align="center" class="inventory_header">MAKE</div></td> <td width="111" valign="top" class="inventory_header"><div align="center">MODEL</div></td> <td width="104" valign="top"><div align="center" class="inventory_header">TITLE</div></td> <td width="101" valign="top"><div align="center" class="inventory_header">PRICE</div></td> </tr> </table> </td> <td> </td> <td> </td> </tr> <tr> <td height="150"> </td> <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <!--DWLayoutTable--> <xsl:for-each select="style/list_item"> <tr> <td width="70" height="1"></td> <td width="142"></td> <td width="85"></td> <td width="95"></td> <td width="21"></td> <td width="111"></td> <td width="104"></td> <td width="104"></td> <td width="68"></td> </tr> <tr> <td height="64"></td> <td align="left" valign="top" bgcolor="#FFFFFF" class="margin"><img src="{imgsrc}" /></td> <td valign="top" class="year1"><xsl:value-of select="year"/></td> <td colspan="2" valign="top" class="make1"><xsl:value-of select="make"/></td> <td valign="top" class="model1"><xsl:value-of select="model"/></td> <td valign="top" class="title_status1"><xsl:value-of select="title"/></td> <td valign="top" class="price1"><xsl:value-of select="price"/></td> <td> </td> </tr> </xsl:for-each> <tr> <td height="31" colspan="9" valign="top" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell--> </td> </tr> <tr> <td height="34" colspan="9" valign="top" class="footer"><div align="center"><a href="home.xml">HOME</a> | <a href="about.xml">ABOUT</a> | <a href="builders.xml">BUILDERS</a> | <a href="sale.xml">FOR SALE</a> | <a href="sold.xml">SOLD</a> | <a href="faq.xml">FAQ</a> | <a href="links.xml">LINKS</a> | <a href="contact.html">CONTACT</a> <br /> </div></td> </tr> <tr> <td height="20" colspan="4" valign="top" class="copyright"><div align="left">© Copyright 2007 SalvageGold.com </div></td> <td colspan="5" valign="top" bgcolor="#000000"><div align="right" class="privacy"><a href="privacy.html" class="style4">Privacy Policy</a></div></td> </tr> <tr> <td height="0"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table></td> <td> </td> </tr> </table> </td> </tr></table><!-- End ImageReady Slices --><span class="style3"></span></body></html></xsl:template></xsl:stylesheet>- - - - -CSS FILE:/* CSS Document */body {font-family: Verdana, sans-serif;margin:0px;padding:0px;color:#000000;background:#000000;font-size: 9px;}td {font-family: Verdana, sans-serif;}th {font-family: Verdana, sans-serif;}h1{color:#FFFFFF;}a{color:#663300;}a:hover{ color:#996600; text-decoration:none; font-weight: bold;}.copyright { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; margin-left: 10px; background-color: #000000; padding-left: 10px;}.privacy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #CCCCCC; padding-right: 10px; background-color: #000000;}a:visited{color:#CC6600;}.title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #996600;}.year1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #CCCCCC; text-align: center; vertical-align: middle;}.make1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: normal; text-align: center; vertical-align: middle;}.model1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #CCCCCC; text-align: center; vertical-align: middle;}.inventory_header { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; background-color: #660000; padding-top: 8px; color: #FFFFFF;}.body_text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; margin-left: 18px; margin-right: 18px; line-height: 18px; padding-right: 28px; padding-left: 28px; text-align: left;}.footer { font-family: Arial, Helvetica, sans-serif; font-size: 9px; background-image: url(images/index_19.jpg); color: #996600;}.margin { padding-left: 28px; padding-top: 28px;}.list_image { padding-left: 18px;}.title_status1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #FFFFFF; text-align: center; vertical-align: middle;}.price1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-color: #996600; text-align: center; vertical-align: middle; font-weight: bold; color: #FFFFFF;}

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

All previews seem exactly the same to me.The only place where I see any difference is Dreamwaver 8's Design window, but that's normal. You can't expect that to be 100% CSS aware or better yet- to behave as browsers do. So, this unavoidably creates a difference from the preview in the browser (whichever one) and the design window. That's exactly the reason why all editors have a "Preview in browser" option.

Link to comment
Share on other sites
yldziner Newbie

yldziner

Posted
  • Author
Posted
All previews seem exactly the same to me.The only place where I see any difference is Dreamwaver 8's Design window, but that's normal. You can't expect that to be 100% CSS aware or better yet- to behave as browsers do. So, this unavoidably creates a difference from the preview in the browser (whichever one) and the design window. That's exactly the reason why all editors have a "Preview in browser" option.
You say that all previews seem the same? Even when I post it on the server, the background color does not load and the rollovers do not work. . .http://www.salvagegold.com/index.xmlDo you see what I mean?
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Here's a shot from the link you gave in IE exactly as I see it:backgrounduz5.th.pngAnd the roll overs work as well.Only one problem. The URL for the home page is wrong. It says "home.xml" when it's actually "index.xml".

Link to comment
Share on other sites
yldziner Newbie

yldziner

Posted
  • Author
Posted

Hmm. On Mac it previews the background correctly in IE, but the rollovers don't work. In Netscape and Firefox the rollovers don't work and the background color does not load. In Safari everything works. Is something in the xml or xsl causing the problem?

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Ah. Firefox. I see. I had the issue with the background color too and I'm guessing the reason applies to the roll overs too.It's the cause of all differences FF has with IE in XSLT sence. IE performs the transformation, serializes the tree and parses the serialized result again. Firefox takes the result tree as a result without serializing it. We can't exactly grasp the actual scope of this as users, but on implementation level, it makes a big difference.To translate the above into a more understandable fashion... in short, it's all in the xsl:output element:

xsl:output method="html" encoding="ISO-8859-1" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

The way you call it, IE transform the above into HTML tree with the XHTML DTD. While this is technically wrong (if you invoke the transformations on the server, you'll see the invalid markup it would generate), it's the only way to actually display HTML page in IE.Firefox on the other hand serializes this into a HTML tree, but because of the XHTML DTD, it supposes that what you have is "real" XHTML. And "real" XHTML (served with the real MIME type of application/xhtml+xml) doesn't allow background manipulations on the body element, but only on the html one. At least that's what the people from Mozilla replied when I reported this as a bug, after actually isolating it as issue.How to fix this you ask? Well, the quickest fix is to simply change the "body" CSS selector to "html" instead.As for the roll overs, I guess it's because XHTML (at least with the right MIME) deprecates them and therefore, Firefox doesn't interpret it then. The solution in my point of view is to use :hover instead.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...