CSS, XML, IE versus Firefox - need advise, please.

[Kary4th]

Hey all. I hate my first post to be a plea for help, but... well, I was looking for a solution and found this forum. Searched for a CSS and XML and found nothing.


I have a page with a field that holds XML generated when the user enters information in a popup input form. I want to use css to simply make the XML readable for the user. No translation, interpretation, etc.

Knowing diddly about css (I've never done anything out of the ordinary before), I assumed I could apply it to the XML that I insert onto the page.

This works fine in Firefox, is a little funky in Opera, but doesn't do much of anything in IE7.

Can anyone tell me what I'm doing wrong?

XML sent to browser:
<?xml version="1.0" encoding="utf-8"?><companyData> <company name=""><name>Company Name</name><staffing>Staffing</staffing><workStatus>Work Status</workStatus><deliveries>Deliveries</deliveries><comments>Comments</comments><equipment>Equipment</equipment></company><company name="Training Example Company"><name>Training Example Company</name><staffing>72</staffing><workStatus>On track</workStatus><deliveries>None</deliveries><comments>None</comments><equipment>books</equipment></company><company name="Steel Workers 354.com Inc."><name>Steel Workers 354.com Inc.</name><staffing>19</staffing><workStatus>On schedule</workStatus><deliveries>None</deliveries><comments>Work progressing well. No problems.</comments><equipment>1 crane, 1 generator</equipment></company><company name="Thoma Electric"><name>Thoma Electric</name><staffing>19</staffing><workStatus>Behind schedule by 2 days</workStatus><deliveries>1 case romex</deliveries><comments>three guys called in sick</comments><equipment>panel truck</equipment></company><company name="UseYourClub"><name>UseYourClub</name><staffing>6</staffing><workStatus>Good</workStatus><deliveries>ice Cream</deliveries><comments>noce kids</comments><equipment>Roller skates</equipment></company></companyData>

Firefox results:
http://roch.onlineproject.com/images.nsf/firefox.jpg

IE results:
http://roch.onlineproject.com/images.nsf/IE.jpg


CSS (as of this moment):
companyData {display:table; border-collapse: separate; border-spacing: 20px; }
company {display:table-row; font-family:arial; font-size:90%; color:black; width:5em }
name {display:table-cell; font-family:arial; font-size:90%; color:blue; width:200px; padding:5px;}
staffing {display:table-cell; font-family:arial; font-size:90%; color:black; width:50px; padding:5px;}
workStatus {display:table-cell; font-family:arial; font-size:90%; width:100px; padding:5px;}
deliveries {display:table-cell; font-family:arial; font-size:90%; width:100px; padding:5px;}
comments {display:table-cell; font-family:arial; font-size:90%; width:200px; padding:5px;}
equipment {display:table-cell; font-family:arial; font-size:90%; width:100px; padding:5px;}

Any words of guidance would be greatly appreciated.

Thanks,
Kary

[jscheuer1]

Please post a link to the page on your site that contains the problematic code so we can check it out.

Or put up a demo page somewhere and give us a link to that.

I don't see any xslt stylesheet declaration in the main code though. IE 7 will probably require that and a valid xslt stylesheet. The rules vary from browser to browser, but generally with xml/xslt if you follow the standards, IE 7, Opera, and FF will all give good results. Opera and FF do a fairly good job of parsing xml by itself, so that may be why it looks OK to you in those.

Though there are better explanations, this one is pretty easy to follow:

http://www.w3schools.com/xsl/xsl_transformation.asp

[Kary4th]

I've made a copy of the application here (http://roch.onlineproject.com/DailyReportModifications.nsf/Web%20Private%20Drafts!OpenView). Log in using the name "Steve Vendor" and the password "access".

There is a document in this view that you can open (This is a very old - 9 years - application that I'm moving out of the '90's). It the area named "Work on site," you can see the area that should contain the table.

Adding the stylesheet, as you suggested, John, has solved my IE problem. At least in that the XML alone (not in the document you see in the linked view) works fine now (link (http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml)).

The new code doesn't work within the document, though. I've been looking at this too long. I can't see why it doesn't work within the context of the document. Any more words of genius?http://forums.rennlist.com/rennforums/graemlins/surrender.gif

[jscheuer1]

I'm not really sure what you are doing there, but it appears as though you are mixing HTML and xml. The three things that spring to mind that might work are showing the xml document in an iframe, object tag, or imported via Ajax.

Something like:


<iframe src="http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml" width="860" height="400" scrolling="no" frameborder="0"></iframe>

[jscheuer1]

Iframe is not ideal though, as it is becoming deprecated. Object would be better, but that will throw up a security alert in IE. So you can do this:


<!--[if IE]>
<iframe src="http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml" width="860" height="400" scrolling="no" frameborder="0"></iframe>
<![if !IE]>
<![endif]-->
<object type="text/xml" data="http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml" width="860" height="400"></object>
<!--[if IE]>
<![endif]>
<![endif]-->

IE will get the iframe, all others the object. If IE 8 overcomes this issue, you will be able to do it like so:


<!--[if lt IE 8]>
<iframe src="http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml" width="860" height="400" scrolling="no" frameborder="0"></iframe>
<![if IE 8]>
<![endif]-->
<object type="text/xml" data="http://roch.onlineproject.com/DailyReportModifications.nsf/DR.xml" width="860" height="400"></object>
<!--[if lt IE 8]>
<![endif]>
<![endif]-->

Then IE 7 and less will get the iframe, IE 8 and all other browsers will get the object.

If AJAX works, it would be better in some ways, yet requires javascript, which iframe and object do not. I cannot test AJAX as easily though, as it must all be on the same domain.

[bikeman]

Probably a bit late for you but if I understand you correctly you want to display xml data in a html page.

Formatting/parsing xml in to html/css is acheived via XSLT.

XSLT is a stylesheet language for XML and fairly easy (though not as easy as xhtml or xml).

see http://www.w3schools.com/xsl/