Images show in IE, but not in Firefox - css

I am adding images as follows with XML and CSS:
<html:img src="./pictures/logo.jpg" alt="dupa"/>
They are showing correctly in IE, but not in Firefox. What could be the cause and how can I solve it?
I use this, but still can't see a picture...
My code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="styl.css"?>
<dokument xmlns:html="http://www.w3.org/TR/REC-html40">
<logo><img src="./Obrazki/logo.jpg"/></logo>
</dokument>

It should be
<img src="./pictures/logo.jpg" alt="dupa" />
read this http://www.w3schools.com/html/html_images.asp

Sollution was:
<dokument xmlns:html='http://www.w3.org/1999/xhtml'>
instead of a
<dokument xmlns:html="http://www.w3.org/TR/REC-html40">

Related

Center text of a Xamarin Forms TabbedPage Title

i have a TabbedPage with multiple Child-Pages, with a title each.
When the title is short enough to be single line the text gets centered perfectly, but as soon as the text needs more than 1 line it is no longer centered.
Can anyone tell me how to fix this?
I think it's impossible to do in common way for all platforms, and you have to do it in platform specific way.
For android project I did it in such way:
In file Styles.xml from folder Resources/values I added style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme"
parent="#android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/CustomTab</item>
</style>
<style name="CustomTab"
parent="#android:style/Widget.Holo.ActionBar.TabText">
<item name="android:gravity">center</item>
</style>
</resources>
And in MainActivity.cs I added
[Activity(Theme = "#style/CustomTheme")]
For Windows phone I found this article https://nocture.dk/2014/12/10/xamarin-forms-customizing-tabbed-page-header-title-windows-phone/, but didn't try it.
For iOS i didn't check too http://jfarrell.net/2015/02/25/customizing-the-tab-bar-on-ios-with-xamarin-forms/.

Simple xml document with Css

Hi i am new in programming i am creating a simple xml document and i want to apply Css in my xml data . My xml is
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE Customers SYSTEM "customers.dtd">
<Employees>
<Employee>
<FirstNameLabel>FirstName:</FirstNameLabel>
<FirstNameData>Ana</FirstNameData>
<FirstNameLabel>LastName:</FirstNameLabel>
<FirstNameData>Ali</FirstNameData>
</Employee>
<Employee>
<FirstNameLabel>FirstName:</FirstNameLabel>
<FirstNameData>Ash</FirstNameData>
<FirstNameLabel>LastName:</FirstNameLabel>
<FirstNameData>Ana</FirstNameData>
</Employee>
</Employees>
I need to display results as
FirstName: Ana
LastName: Ali
FirstName: Ash
LastName: Ana
While FirstName and LastName should be green while Values should be red
Help would be appreciated Thanks
I don't think you looked before posting this. w3schools shows exactly how. http://www.w3schools.com/xml/xml_display.asp It is very similar to adding a style sheet to html. Also, you should fix your indentation.
Try:
FirstNameLabel{
float:left;
}
FirstNameData{
clear:left;
}
I believe you may want to look to use XML Stylesheet to render and format your XML files rather than CSS. CSS is, as far as I know, for HTML documents. In your case, you would need to create a XSLT sheet, which is pretty much XML that specifies how to present each of your node. below is a quick example (untested):
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="Employees/Employee">
<p>Firstname: <xsl:value-of select="FirstNameData"/>.</p>
<p>Lastname: <xsl:value-of select="LastNameData"/>.</p>
</div>
</xsl:for-each>
</body>
</html>
Note that you shouldn't need to store labels in your XML. You can have them in your stylesheet.

How to convert a xml element into url using css?

I have an xml file which has an element like this
<video><title>XXXX</title><url>VIDEO ID OF YOUTUBE></url></video>
Is there any way to use CSS to display the elements as
XXXX
CSS is for Styling, if you wish to read XML and produce HTML Content you should use Javascript. Or any server side language if you want it to be done before sending it to the client browser.
As Nicklas points out, many think of Css to be intended to be for styling and nothing more. More generally, though, it's intended for the presentation of your information. This is a fringe case that's difficult for me to say whether it's going too far or within the scope of CSS: is this simply changing the presentation, or is it doing something more?
I'm sure many, like Nicklas, would argue that what you want to do goes beyond the intended purpose of CSS. And I'd probably agree with Nicklas in that for most cases I'd find this to be a less-than-ideal way to go about things.
With that said, it is possible
#url:before {
display: inline-block;
content: "<a href=\"http://www.youtube.com/";
}
#url:after {
display: inline-block;
content: "\">";
}
#text:after {
display: inline-block;
content: "</a>";
}
Note: I used Html in this example for the sake of making a JsFiddle, but the same strategy should work for an Xml file
I do not know of a way to use CSS for this. But you can do this using a XSLT Stylesheet. Is that what you want? Then a XSLT Stylesheet similar to this can help you:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
<xsl:output method="html" indent="yes"/>
<xsl:template match="/" >
<body>
<xsl:apply-templates select ="/items/video"/>
</body>
</xsl:template>
<xsl:template match="video" >
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="./url" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:value-of select="./title"/>
</a>
</li>
</xsl:template>
<xsl:template match=
"*[not(#*|*|comment()|processing-instruction())
and normalize-space()=''
]"/>
<xsl:template match="text()"/>
</xsl:stylesheet>
This assumes that the XML input file looks as follows:
<?xml version="1.0" encoding="utf-8" ?>
<items>
<video>
<title>XXXX</title>
<url>VIDEO ID OF YOUTUBE></url>
</video>
<video>
<title>XXXX</title>
<url>VIDEO ID OF YOUTUBE></url>
</video>
</items>
Exactly how you should do the transform is hard to say when I don't know about your requirements. A XSLT transform can be done in a number of ways. If the XML input file is static one can let the webbrowser do the transformation. If the XML file is on a server you can write a transform in a awebpage and sen the HTML to the webbbrowser. It all depens on your environment.

css not working on my firefox extension toolbar

iam writing a simple firefox toolbar, but i have failed to set a few list style images with css. Please help.
//
katimbatoolbar.css
(found in chrome/skin) folder
#katimbatoolbarstart
{
list-style-image :url("chrome://katimbatoolbar/skin/button-1.png");
}
katimbatoolbar.xul (my user interface file, found in "chrome/content/" folder)
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://katimbatoolbar/skin/tuttoolbar.css" type="text/css"?>
<overlay id="katimbatoolbaroverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://katimbatoolbar/content/katimbatoolbar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="katimbatoolbar" toolbarname="katimba suite" accesskey="k"
class="chromeclass-toolbar" context="toolbar-context-menu"
hidden="false" persist="hidden">
<toolbarbutton id="katimbatoolbarstart" tooltiptext="start surfing using katimba ++"
label="Start" oncommand="katimbaClass.installLocalHost()"/>
</toolbar>
</toolbox>
</overlay>
Here is my chrome.manifest file
content katimbatoolbar chrome/content/
overlay chrome://browser/content/browser.xul chrome://katimbatoolbar/content/katimbatoolbar.xul
skin katimbatoolbar classic/1.0 chrome/skin/
The toolbar works fine, but really looks ugly since the css is not working. Any help appreciated in advance.
By the way, Here is my folder structure
mytoolbar/
install.rdf
chrome.manifest
chrome/
content/
katimbatoolbar.xul
katimbatoolbar.js
skin/
katimbatoolbar.css
button-1.png
In your XUL file you reference chrome://katimbatoolbar/skin/tuttoolbar.css while the file in your folder structure is called katimbatoolbar.css. Plus, you define
content katimbatoolbar chrome/content/
but the folder structure starts with mytoolbar.

Correct way of including remote CSS style sheet in OpenSocial gadget module XML

What is the correct/recommended way of including remote CSS style sheet in OpenSocial gadget module XML?
I hope we CAN use remote CSS (to enable client caching etc), so that we can get rid of inline styling...
Should a link tag be included in the CDATA section of the html typed Content tag below, or what are your suggestions?
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My App title">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="url" view="mobile" href="somemobileplace" />
<Content type="html">
<![CDATA[
<div>some html content</div>
]]>
</Content>
</Module>
I got a reply that it's ok to include things like remote js script files, style sheets in the body section.
I also read in an Open Social book that these things actually get moved into the header section once displayed by the container.

Resources