All GUI screen in MRE. Buttons with background images show up in IE but not in Firefox. Nor in Mobile Faves and Safari on iPad.

Style from the Properties tab, Styling: (Advanced):

BACKGROUND-IMAGE: url(C:\Users\francism\AppData\Local\Temp\ddm_000af.png); Z-INDEX: 80; POSITION: absolute; 
TEXT-ALIGN: center; BACKGROUND-COLOR: transparent; WIDTH: 20px; BACKGROUND-REPEAT: no-repeat; 
BACKGROUND-POSITION: center center; HEIGHT: 20px; VERTICAL-ALIGN: middle; TOP: 3px; LEFT: 469px

Style from the HTML page when executed in a web browser:

<INPUT style="BACKGROUND-IMAGE: url(app/max2.png); Z-INDEX: 80; POSITION: absolute; TEXT-ALIGN: center; 
BACKGROUND-COLOR: transparent; WIDTH: 20px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center center; 
HEIGHT: 20px; VERTICAL-ALIGN: middle; TOP: 3px; LEFT: 469px" id=button_sc_run_max language=javascript tabIndex=79
 onclick=button_sc_run_max_onclick(this) type=button defaultselection="1" requests_list="21" autoExecute="false" 
name="button_sc_run_max">

I pointed to an image in the Web Applications area of Dev Studio, which is on the web server, but I guess Dev Studio copies that image to C:\Users\francism\AppData\Local\Temp\ and to MRE.

Help!

This message has been edited. Last edited by: Francis Mariani,

I wondered how ddm_000af.png turned into max2.png ...

Francis, can CSS actually resolve this:

style="BACKGROUND-IMAGE: url(app/max2.png);

Unless the base URL gets set behind the scenes to the MRE domain's cryptic directory name and so "app/" would be relative to that, I don't see how CSS could understand what "app/" maps to ... but I really don't know how MRE operates at that level.

Another theory would be that some of the magic ibi*.js scripts are doing something to the INPUT element in the DOM after rendering the HTML therefore resolving those references to an actual image url, but being that the case, why doesn't it work in any other browser? As far as I know, Firefox is supposed to be supported in 7.7

Sorry, not much help here. I'm just lending my shoulder.

IE resolves relative URL's like "app/max2.png" differently than the other browsers do.

You're probably best off using an absolute URL, based in the document-root. For example "/app/max2.png" (I'm just assuming here that the app directory is at your web server's document-root).

I've been scolded for hand-coding within HTML Composer. I want to point-and-click to add the background image. HTML Composer seems to decide where the image is ultimately stored, no matter where it exists on the server.

Is this due to Tomcat providing HTML and Java server capabilities? I have also noticed the same and we do not have a separate HTML server installed -- we use Tomcat for everything.

- ABT

I think the easy solution is to put such images in your site's CSS file. IIRC, you already do provide your own anyway. If you didn't already, just copy the link-tag for that into your HTML source. That's one of those operations that are safe to perform; at least, it doesn't give us trouble on 7.6.11.

Concerning the behaviour where Dev Studio copies files to a local project directory when you reference a file on the web-server, I was told that Dev Studio cannot know where the file will eventually be on the server once the project gets deployed, so they make a local copy instead.
A consequence of that decision is that you end up with several local copies of, for example style-sheets, that were in different stages of development when the copy was created... Ouch!

There is some stuff that you're currently really better off hand-copying into your HTML, such as URI-references to files on your web-server. Perhaps at some time in the future, IBI will actually come around with a proper solution for this issue, but by then we will be complaining about the lack of brain-plug support and that it still uses lightspeed-bound particles for communication.

I modified one of seven buttons and set the background to an image in a web server folder, using a relative URL:

It displays in IE, but not in Firefox.

The CSS is now:

BACKGROUND-IMAGE: url(approot/phase1/images/max2.png);

If I type the URL of the image in the address bar, I do see the image.
If I use the full URL, including server name, it works in both IE and Firefox.

Because we have multiple environments, (Dev, UAT, Prod) I added a Custom Setting in the Admin Console that provides the Web Server URL which can be used in the fex that calls this HTMLFORM.

Hi Francis,

I read somewhere that Mozilla doesn't recognizes

<input type=button>  

so any styling or images applied to it is not recognised in Mozilla. I too had the same problem where the styling had gone in Firefox but was working perfectly in IE.

Our team is researching on how can we achieve the same functionality in Mozilla.

quote:

Originally posted by Swap:
I read somewhere that Mozilla doesn't recognizes

<input type=button>  

That is nonsense.

Francis,

You're still using a relative URL.

Try:

background-image: url(/approot/phase1/images/max2.png);

Or, if all files (HTML, CSS and image) are in the same directory, leave out the path information altogether:

background-image: url(max2.png);

I decided to put the complete path. Now the image does not show up in Dev Studio but does in IE, FF, iPad, Mobile Faves.

So much for device-agnostic, platform-independent development.

BACKGROUND-IMAGE: url(!IBI.AMP.WEB_SERVER_URL;/approot/phase1/images/max2.png); Z-INDEX: 80;
POSITION: absolute; TEXT-ALIGN: center; BACKGROUND-COLOR: transparent; WIDTH: 20px; 
BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center center; HEIGHT: 20px; 
VERTICAL-ALIGN: middle; TOP: 3px; LEFT: 469px

This is what we do to produce background images for buttons via css. Seems to show up just fine in html composer/chrome/ie/ff

  
.submit_button{
	background: transparent url("/approot/images/submit_button.png") no-repeat center;
	border: none;
	width: 59px;
	height: 23px;
	color: transparent;
	cursor: pointer;
}

Do you do this for buttons in HTML Composer created html files that are in MRE and on a B.I. Dashboard?

For the record, the difference between IE 6 and other browsers with resolving relative URI's is in where they resolve the URI relative from.

Most browsers (including IE7 and up) resolve a relative URI from the location of the style-sheet, but IIRC, IE6 and earlier resolve it from the location of the html page. That's not a problem as long as your style-sheet is in the same directory as your HTML is, but that's frequently not the case.
I don't have IE6 available to me here, so I couldn't verify it actually behaves like this, but I do recall seeing it do so.

At first sight, resolving the URI relative to the style-sheet path seems a bit strange, but imagine what would happen if you use a remote stylesheet. If the URI's would be relative to the page, all references in the style-sheet would need to be absolute (remote) references, like

url(http://mypopularstylesheet.com/icon.png);

Especially for people who host 3rd party style-sheets on different servers, that would be a problem! They'd have to tailor each copy of the style-sheet to the server it resides on...

This message has been edited. Last edited by: Wep5622,

quote:

Do you do this for buttons in HTML Composer created html files that are in MRE and on a B.I. Dashboard?

Yup.

quote:

Originally posted by Prince Joseph:
This is what we do to produce background images for buttons via css. Seems to show up just fine in html composer/chrome/ie/ff

  
.submit_button{
	background: transparent url("/approot/images/submit_button.png") no-repeat center;
	border: none;
	width: 59px;
	height: 23px;
	color: transparent;
	cursor: pointer;
}

I know this is an old thread, but it's exactly what I'm struggling with.
The above seems like a great solution to me, but maybe I'm doing it wrong. I created a CSS file in my Other folder in the MRE domain, where I also have my images, and when I include that CSS file in my HTML page, nothing shows in the Composer, IE shows only one of my images, and Firefox doesn't show any of them. Incidentally, it looks like Firefox also doesn't recognize that the CSS changed, as no matter how many times I refresh, it won't pick up changes.

How do you refer to the CSS file in the Other folder?

By the way, the mythical Hotfix 7 is supposed to fix the problem I reported some time ago...

In the HTML Composer, I'm just going to the Insert menu and saying CSS/Scripts, then pointing to my CSS file.

Unfortunately, we're running in a non-hotfixed environment of 7.7.0.3.

"a non-hotfixed environment of 7.7.0.3" was the environment I was in when I reported the problem.

quote:

Originally posted by J.Hines:
In the HTML Composer, I'm just going to the Insert menu and saying CSS/Scripts, then pointing to my CSS file.

That's probably why it doesn't seem to update then. If you use the Insert CSS file menu item in HTML Composer and actually select a file, it creates a local copy of the file in the current project directory. If you then update the original file, the local copy is still a copy of the old version.

Apparently you can also specify a URL in that dialog-window, which is totally counter-intuitive but is reported to work. I generally just hand-edit the HTML file after Composer is done with it and add CSS references by hand.

Why you're not seeing the image at all in Firefox is a bit strange, but possibly FF ignores the line as being invalid due to the quotes (which aren't according to the CSS spec).

Does this help?:

background: transparent url(/approot/images/submit_button.png) no-repeat center center;