Underbars in CSS Files and Firefox vs. IE 7 Compatibility

Hi folks.
This may have already been covered somewhere, but I've spent the last two days trying to solve this problem and didn't see anything referring to it. So, in order to save anyone else the hassle, I'll describe the problem and its fix.
I just started using Apex 3.1.1 yesterday, and I wanted to see how hard it would be to link a CSS file to a site.
I read http://download-west.oracle.com/docs/cd/B32472_01/doc/appdev.300/b32471/ui.htm#BABHJCJI but that still didn't help me. Nothing I tried would make Firefox see the linked stylesheet even though IE 7 was having no trouble at all. That was ironic since I discovered people having problems with IE 7 not showing styles as opposed to Firefox having no problems.
When I put the style code directly into the header of the page, it would work in both Firefox 2 and IE 7, but when I tried to link the CSS file, only IE 7 would show the altered styles. I was about to give up, when it suddenly occured to me that when I chose "Icons" for the "View" option inside the Cascading Style Sheets Repository Page instead of "Details" that the underbar or underline in my file name would not render correctly. Instead of showing up as "cfdb_styles.css" it was showing up as "cfdb styles.css" in both IE 7 and Firefox.
So, after I changed the file name to "cfdbstyles.css", everything suddenly worked in both browsers! I suppose this could be logged as another one of those improbable Apex bugs.
The moral of the story: don't use the "_" (underbar/line) in your CSS file names.
And once again, I apologize if this is common knowledge. I certainly hadn't found it anywhere I looked online.
Thanks for your time, and I hope that helps someone out there struggling as I did,
Anton

Anton,
I don't think you are right. Have a look at the themes directory. There you will see that all
the css files are named like
theme_V3.css
and those contain an underline. If you look at the page template, you will see there how
those files are referenced. So, this is definitelly not an apex bug.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Similar Messages

New layout, CSS errors and Firefox problems

Hi
Could it be that some of the Firefox problems are caused by:
1) The wrong mime type for the CSS files? Currently it appears to be:
application/x-css
shouldn't it be
text/css
2) Errors in the CSS files and inline CSS of.
http://forums.oracle.com/forums/categoryHome.jspa?categoryID=84
Can recommend using:
http://jigsaw.w3.org/css-validator/
==== New layout ======
The border error on the download button has been fixed, but the alt attribute of the upper right search icon is still "faq", shouldn't it be "Search"
<img src="images/search-16x16.gif" width="16" height="16" border="0" alt="Search">
Axel

There are a number of fixes still to be made, but most of them will wait until our upgrade (still a few months out).

Create a css file and use it

Hi
i use jdev 11.1.1.7
I have several items on the page . for example panelFormLayout .
i want declare several property (background-color ,...) and assing it to all of panelFormLayout .
so whenever i change color of background , background color of ALL panelFormLayout change easily .
(I created a css file and declared my property in it but i cant use it !!! )
NOW i hope to create a CSS file or(any thing you suggest) for this reason and use it .
How can i do this ?
Thanks alot

You can also download the stand-alone Skin Editor to help you create the skins and style you want.
A bit more on the topic here:
https://blogs.oracle.com/shay/entry/styling_specific_adf_components_with

How to call the css file and its images from our application......

hai,
Im uploading a .css file and some images in Apex shared components ,now how to call the css file and images from my Application.... plz tell me detailed.....
Edited by: anoo on Nov 3, 2008 12:51 AM

Hi Anoo,
Sorry, didn't see that you'd started a new thread, so have answered this in 'undefined' is null (or) not an object "
Andy

Pdf file and Firefox 20.00

I'm not sure what's happening here but when I view a pdf file in Firefox 20.00 from a link on the website it shows all the text as below?
%x$#%-%%#*x%
If I view the pdf in Google Chrome or Safari the text is perfectly ok. Anyone come across this before, obviously something is wrong with Firefox?
Cheers
Os

hans-g. wrote:
Hi Os,
your "%x$#%-%%#*x%" I for me defined it as a bug and so I used my link only as an example for the working FF, so the text isn't of interest per se.
My screenshot should show you (ensuring at the same time an answer to Dave) my FF "Einstellungen" (=settings). As you can see in my screenshot from above FF "took" Adobe Acrobat". You/we have the choice, see new screenshot.
HTH.
Hans-Günter
Hi Hans,
Thanks for the info. I've gone into preferences and set Firefox to use Adobe Acrobat Professional now, which automatically downloads the pdf to my desktop rather than open it up in the browser. As you say it must be a bug because it's only since v20.00 Ive noticed the difference. Infact before that Firefox never opened it up in a browser window but always downloaded the pdf so when the automatic update happened something in 20.00 has changed.
Cheers
Os

PDF files and Firefox slight annoyance

Whenever I have an open PDF file in a tab in Firefox, it renders me unable to scroll using my laptop's touchpad scrolling. When I use it, even after clicking in my active tab, it actually is scrolling the PDF instead of my current tab.

Hi rawbinator,
Have you checked to see if your PDF add-on is up to date? I'd take a look at [[Opening PDF files within Firefox]]. There is a lot of information in there and it lists a couple of different PDF add-ons. I'd try both to see if it is localized to just one.
Hopefully this helps!

Dreamweaver is randomly deleting my .css file and then crashing...need help ASAP!

I use Dreamweaver CS 5.5 at my job. I just built a new website for the company using it and for a while, it was deleting the css file completely while in dreamweaver, but it had the little * next to the title like it hadn't been saved. i would usually try to close it without saving or crashing it which is normally does after this happens. So far, the css files have not been totally deleted...yet. I'm not waiting around for that to happen before I try to fix it. I've searched google and the forums and have found nothing or any related topics. I had my computer completely reformatted and that seemed to have fixed it for a short time. Now I'm on another web project and it's doing it again, but this site is bigger and more important than the last, and I don't have as much time to work on it. Has anyone come across this bug at all? I need to get this fixed ASAP...I would really hate to lose my files. I tend to hit Ctrl+S instinctively these days and i'd hate to do that while it's been deleted. not to mention the downtime of restarting Dreamweaver only to have it do it again 5 minutes later.
Computer specs:
Windows 7 Pro SP1 64-Bit
Dreamweaver CS 5.5
24GB RAM
intel Xeon X5650 @ 2.67GHz/2.66GHz (2 processors - 24 cores)
Nvidia GeForce GTX 570
Please let me know if there are any solutions to this. Thank you!
-Travys

Hmmmm.... When file content randomly disappears, it's usually a symptom of something much deeper -- like a nasty Trojan/Virus, a failing hard drive, bad CPU or corrupt user account.
You can try the usual DW solutions below, but I think you might want your IT guys/gals to run some diagnostics on your computer.
#1 Ensure your CSS & HTML files contain valid code. Use the W3C tools below.
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/
# 2 When DW starts acting weird, the first thing to try is Deleting Corrupted Cache in DW
http://forums.adobe.com/thread/494811
#3 If that doesn't help, try Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
#4 If all else fails, use the CS Cleaner Tools below followed by a software re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Good luck!
Nancy O.

Isp file under WEB-INF call css file and jasript file

Hi , is that OK to call a jascript file or css file if the jsp file is under WEB-INF? How to do that?

You have to remember that all client side requests will be of 2 types: relative or absolute. If you refer to the file using the absolute URL of the resource (like http://www.my.com/application/resources/content.css) then you will have no problem.
If you use a relative URL, the URL has to be relative to the address that the client sees on the browser. The JSP may be in the WEB-INF directory, but the client doesn't see that. They put in a URL like http://www.my.com/application/process and the server included/forwarded to the WEB-INF content which the client doesn't see or know about. So when you use a relative URL, the URL has to be relative to http://www.my.com/application/process and not to http://www.my.com/application/WEB-INF/<...>/display.jsp where the JSP actually lives.

CSS :: IE and FireFox issues

Hi.
I am developing a website (
see
here) using CSS which displays fine in IE. However, when I view
it in FireFox, I have two major issues:
1. On all pages, the navigation bar seems to be stretched and
hence the links become offset.
2. On the 'Info' page, the tariffs table is stretched
vertically.
Does anyone know how to solve these two very annoying issues?
Thanks in advance.
Tom.
ps. I can give you the css/html files if this helps.

Stibily25 wrote:
> Hi.
>
> I am developing a website
> (
http://homepage.ntlworld.com/ian.staveley/brightoncouriers/)
using CSS which
> displays fine in IE. However, when I view it in FF, I
have two major issues:
>
> 1. On all pages, the navigation bar seems to be
stretched and hence the links
> become offset.
Change your 'padding' to as below:
#menu {
position:absolute;
padding: 0 0 10px 0;
margin:0;
left:161px;
top:110px;
height:2em;
width:830px;
list-style-type:none;
border:1px solid #bbb;
background-color:#EEE;
> 2. On the 'Info' page, the tariffs table is stretched
vertically.
Many html tags including <p> paragraph and <h>
headings have default
margins and paddings. This is what you are seeing, which
makes the table
stretch vertically.
Add an 'id' to the tarifs table called surprisingly or not
'tarifs' as
below:
<table id="tarifs" width="483" border="0" cellpadding="0"
cellspacing="0">
Then add this css to your style sheet:
#tarifs p, #tarifs h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
You can change the values until you have the correct amount
of space,
top, right, bottom, left

Issues with .pdf files and Firefox Android Beta

I read the local paper online and the individual pages present themselves as .pdf files. With the Firefox for Android NON beta clicking on said file downloadable ads it and automatically calls up the default .pdf reader which opens the page. Some recent change in the Beta version simply downloads the file. I then have to manually click to open. Tried clearing defaults on both Firefox and the Kindle app, force stopping both, all to no avail.....suggestions?
Bob

the change was made in firefox 25 - that's why you're currently seeing this behaviour only in firefox beta. the general release for firefox 25 is scheduled for next week. <br>i originally also thought to recommend the pdf.js-addon as an alternative but i found it to be very slow on my android too. unfortunately i don't know of any other solution currently.

Anyone else having any luck with Sony raw files and the Raw 3.8 Compatibility fix?

Tried importing my raw photos from my Sony Nex-5N. Supposed to work with the Nex-C3 which should be the same. Have to use Lightroom instead of Aperture - would prefer Aperture.

I'm not sure as you have some extra letters on the cameras you cite, but Aperture 3 should support the Sony Alpha NEX-5, not sure about the 5N.
When you do import, what happens? When you plug in your camera (how are you importing) and hit the import button, what happens next?
More information the better for us to try and help troubleshoot the issue.

WAR file and CSS

I have a CSS file that is used inside a JSP page. These files are both in the same directory. The problem that I'm having is that when I deploy it on JBoss+Tomcat, for some reason, the JSP page doesn't display any of the classes. It's like it's not finding the CSS file. I did a little test on the side, by defining the styles inside the JSP and it worked fine.
Has anybody had this problem before? Can anybody help me?
I would truly appreciate any input.

Solved it. My problem was in the href. I thought that I could include it with a simple reference to the file due to that fact that they're both in the same directory. But this didn't work. So what I did was include the whole path to the css file, and it worked.
Thanx

How To Use a css File To Watermark A Report

Hello.
I am using Apex 4.0.1 and have a need to place a watermark (that is, a background image) over a report, both a "classic" type and Interactive Report.
I have two questions about this.
1) I've searched this Forum and found several good questions/responses about this subject. What I think is the most maintainable solution is to create a .css file and reference this file within the Template section of a copy of, say, the "Reports Region" template used by my application theme. And so, I made a copy of the "Reports Region" template and called it "Watermark Reports Region". I then created a very simple .css file called "bgimg.css" defined as:
#REGION_STATIC_ID# {
background-image: url(#WORKSPACE_IMAGES#menu_bug.png) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
Note: For those that may not know, the "!important" clause is, in fact, a css defined clause used to tell the browser that it should give the associated option the highest precedence. This prevents my desired css option from being overridden by another css file. Frankly, I myself did not know this until after I saw it being used in several of the responses on this Forum and then read up about it.
I uploaded this css file via the Apex "Shared Components -> Cascading Style Sheets" option. I also made sure that menu_bug.png is, in fact, among my workspace images.
I also made sure that my "Watermark Reports Region" template contains the substitution variable "REGION_STATIC_ID" and that my actual report region has a value in the Region Static Id field.
Within my "Watermark Reports Region" template, I tried to reference my .css file. This is where I think my problem is.
I placed
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#bgimg.css" />
at the very top of the Template section in my "Watermark Reports Region" template.
I then assigned my template to my Apex report. When I run my report, I see nothing.
So, how does one reference this css file within the template?
=================================================
2) I tried using my css tags as an internal style by placing it within the "HTML Header" section of my application page. I used:
<style type="text/css">
#empreport {
background-image: url(#WORKSPACE_IMAGES#menu_bug.png) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
</style>
I assigned a div tag to my report region header and footer that looks like:
In Header: <div id="empreport">
In Footer: </div>
When I run the report, I do get the image. But it is surrounding the report. It looks like my report is "floating" in a sea of bug images.
So, how can I get these images to actually appear within the report itself. In other words, I want the report itself to be "transparent" so as to allow these images to be seen within the report body itself.
Thank you all for any help/advice/code example.
Elie

Elie
Thanks for taking the time to post sufficient information to understand the problem. In future if you're going to such efforts you might want to use them to reproduce the problem on apex.oracle.com, which means you can share actual working (or more likely not working!) code. Please also always wrap code posted on the forum in tags<tt>\...\</tt> tags to preserve formatting and special characters.
>
I placed
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#bgimg.css" />
at the very top of the Template section in my "Watermark Reports Region" template.
>
According to the relevant HTML 4.01 and XHTML 1.x standards, <tt>style</tt> and <tt>link rel="stylesheet"</tt> elements should only appear within the <tt>head</tt> element of a document.
This changes in HTML5. The new <tt>scoped</tt> attribute allows <tt>style</tt> to be used in a prescribed way elsewhere in the document, with the effect that the styling rules specified are only to be applied to the other descendant elements of that <tt>style</tt> element's parent (in the way you're trying to do here). I'd expect <tt>link</tt> with a <tt>rel="stylesheet"</tt> to remain restricted to <tt>head</tt> content in HTML5: off the top of my head I can't see a use case for referencing external stylesheets in a non-metadata context.
That said, current browsers apply CSS regardless of where in the document it appears, and future HTML5-compliant ones will continue to continue to do so for backwards compatibility. For myself, when using XHTML 1.0 I'll continue to follow the only put <tt>style</tt> and <tt>link</tt> elements in the page <tt>head</tt>. When I get round to using HTML5 for real I'll follow the standards for that as well.
I strongly recommend that you follow the standards and only put <tt>link rel="stylesheet"</tt> elements in the page <tt>head</tt>.
>
Note: For those that may not know, the "!important" clause is, in fact, a css defined clause used to tell the browser that it should give the associated option the highest precedence. This prevents my desired css option from being overridden by another css file. Frankly, I myself did not know this until after I saw it being used in several of the responses on this Forum and then read up about it.
>
Use <tt>!important</tt> only where it's actually needed. It's over-represented in this forum because Oracle changed the order of style sheet inclusion in APEX 4.0 and made it more difficult to override theme styles using CSS in the page HTML Header without modifying page templates.
Try your styles initially without using <tt>!important</tt>, and also consider using the cascade to provide any necessary overrides by including your CSS after other style sheets.
>
I then created a very simple .css file called "bgimg.css" defined as:
#REGION_STATIC_ID# {
background-image: url(#WORKSPACE_IMAGES#menu_bug.png) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
I then assigned my template to my Apex report. When I run my report, I see nothing.
>
Because <tt>#WORKSPACE_IMAGES#</tt> is not substituted in external CSS files: +{thread:id=986329}+
If possible it's much better to locate image, CSS and JavaScript files externally on the file system. Otherwise you'll have to use the workaround suggested in that thread and include a <tt>style</tt> element in the page templates to specify the background image.
When I run the report, I do get the image. But it is surrounding the report. It looks like my report is "floating" in a sea of bug images.Reports are descendants of their region containers and may be subject to additional built-in or theme styles that overrides that specified for the region. Your CSS selector has to specify the report element, not the entire region.
So, how can I get these images to actually appear within the report itself. In other words, I want the report itself to be "transparent" so as to allow these images to be seen within the report body itself.I'd use a <tt>class</tt> attribute in the region template: this removes the need to use the <tt>#REGION_STATIC_ID#</tt> selector, and allows the CSS to go in the page <tt>head</tt> where it belongs. Add <tt>watermark-report-region</tt> in addition to any existing <tt>class</tt> values in the region template:
<div class="borderless-region watermark-report-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="bl-body">#BODY#</div>
</div>You may have to inspect the page source (use a web inspector like that found in Safari, or the Firefox+Firebug combo) to figure out what has to be overridden in the theme/templates you're using. This worked for an Interactive Report using theme 17:
.watermark-report-region .apexir_WORKSHEET_DATA {
background: #fff url(/i/menu/blank_app_32.gif);
.watermark-report-region .apexir_WORKSHEET_DATA tr.even td,
.watermark-report-region .apexir_WORKSHEET_DATA tr.odd td {
background-color: transparent;
}For a standard report you'll need to identify the selector required for the actual report element (equivalent to the <tt>apexir_WORKSHEET_DATA</tt> table) using the web inspector or from the report template. It would be a good idea to create standard report template(s) incorporating a <tt>watermark-report</tt> class on the report table to provide a simple selector for such reports.

Css file not getting applied to the application

Hi All,
I have uploaded a css file and used in my application as
<link rel="stylesheet" href="#WORKSPACE_IMAGES#default.css" type="text/css"/>
Previously it was working fine.
But suddenly, it is not working.
I am working from a remote server.
Could anyone please get me a solution for this?
thanks in advance
bye
Srikavi

Hi joel,
From this thread
Shared Files - problems after upgrading APEX 3.0 to 3.1
i have taken your words,
In my development of the browser cache support for static files, I did notice some unexplainable behavior with IE and Firefox. When uploading static files and then testing them, it almost seemed like the browser would request the resource only some of the time (and then get the HTTP 304). If an Expires tag is not computed, I know Firefox will compute one itself.
As per my understanding, Is it cache_expire should be calculated?
I could not get that line.Could you please explain me.
Thanks in advance.
bye
Srikavi.

Found 7 errors in external css files

I am using CS3 and set up the slide show successfully, I ran the "check Browser Compatibility and I get this error,
Found 7 errors in external css files
Affects: Firefox 1.5; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0
line 35; <link type='text/css' href='Spry-UI-1.7/css/SpryImageSlideShow.css' rel='stylesheet'/>
Is this something to be concerned about? Is this widget only meant for CS5, is there a fix needed?

Here is the css
@charset "utf-8";
/* SpryImageSlideShow.css - version 0.2 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
.ImageSlideShow {
position: relative;
width: 480px;
height: 320px;
overflow: hidden;
border: solid 1px black;
.ImageSlideShow .ISSClip {
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
.ImageSlideShow .ISSView {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.ImageSlideShow .ISSSlide {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Required for IE6/IE7 */
height: 100%; /* Required for IE6/IE7 */
text-align: center;
/* Fix to get images to fade properly in IE8 and change correctly in slideshow.
* This is due to the fact that absolutely positioned elements cannot have their
* opactiy altered in IE8. */
.ImageSlideShow .ISSSlide img {
filter: inherit;
.ImageSlideShow .ISSControls {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
display: none;
.ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
position: absolute;
top: 0;
display: block;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
background-repeat: no-repeat;
text-indent: -10000em;
.ImageSlideShow .ISSPreviousButton {
left: 0;
width: 30%;
background-image: url(ImageSlideShow/iss-back.gif);
background-position: left center;
.ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
opacity: 0.5;
filter: alpha(opacity=100);
.ImageSlideShow .ISSNextButton {
right: 0;
width: 30%;
background-image: url(ImageSlideShow/iss-forward.gif);
background-position: 100% 50%;
.ImageSlideShow .ISSPlayButton {
left: 30%;
width: 40%;
background-image: url(ImageSlideShow/iss-play.gif);
background-position: center center;
/* If the slide show is busy, show the busy icon in the view. */
.ImageSlideShow.ISSBusy .ISSView {
background-image: url(ImageSlideShow/iss-busy.gif);
background-repeat: no-repeat;
background-position: center;
opacity: 0.5;
filter: alpha(opacity=100);
/* If the slide show is playing, change the play button image to "pause" */
.ImageSlideShow.ISSPlaying .ISSPlayButton {
background-image: url(ImageSlideShow/iss-pause.gif);
/* Don't show the player controls if the slide show is busy! */
.ImageSlideShow.ISSBusy .ISSPreviousButton,
.ImageSlideShow.ISSBusy .ISSNextButton,
.ImageSlideShow.ISSBusy .ISSPlayButton
display: none;

Underbars in CSS Files and Firefox vs. IE 7 Compatibility

Similar Messages

Maybe you are looking for