Skin for iphone, pictures are not loaded

Question

Dear community,
i'm testing an iphone skin for a simple mobile browser application in a desktop browser. The pictures are not loaded and I cannot find the reason:
JDeveloper 11.1.1.5.0
Tree in Web Content:
=============
images/backButton.png
images/toolButton.png
skins/iphone.css
page.jsp
trinidad-config.xml
============
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>iPhonewebkit</skin-family>
</trinidad-config>
trinidad-skins.xml
===========
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>iphone</id>
<family>iPhonewebkit</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name> skins/iphone.css </style-sheet-name>
</skin>
</skins>
iphone.css
======
.button {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
right: 6px !important;
margin: 0 !important;
border-width: 0 5px !important;
padding: 0 3px !important;
width: auto !important;
height: 30px !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
.backButton {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
left: 6px !important;
margin: 0 !important;
height: 30px !important;
width: auto !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
padding: 0 !important;
border-width: 0 8px 0 14px !important;
-webkit-border-image: url(/images/backButton.png) 0 8 0 14 !important;
I have tried also relative URLs by moving images directory into skins directory, but without success. What am I doing wrong?
Thanks for support,
DF
Edited by: 907283 on 11.01.2012 01:31
Edited tree

Answer 1

Sorry, I forgot to paste it:
<tr:messages/><h:form>
<tr:panelHeader text="Display Items" styleClass="toolbar">
<tr:commandButton text="Back" action="start"
styleClass="backButton"/>
<tr:commandButton text="Show Details" action="detail"
styleClass="button"/>
</tr:panelHeader>
toolbar definition in css:
.toolbar {
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
border-bottom: 1px solid #2d3642 !important;
border-top: 1px solid #000000 !important;
padding: 10px !important;
height: 45px !important;
background: url(/images/toolbar.png) #6d84a2 repeat-x !important;
display: block !important;
.toolbar > h1 {
position: absolute !important;
overflow: hidden !important;
left: 50% !important;
margin: 1px 0 0 -75px !important;
height: 45px !important;
font-size: 20px !important;
width: 150px !important;
font-weight: bold !important;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #FFFFFF !important;
border-bottom: none !important;
Thanks!