Png files referenced in css not displaying in Chrome & Firefox after after PUT

I'm new to dreamweaver but I've got a techy / software background so feel free to speak geek.
I've been tasked to create a simple splash screen for an existing intrenal website for my company.
I've been able to put page together in DW and sucessfully preview in Chrome, Firefox, & IE. After I PUT files on the webserver (under an existing virtual directory in IIS) I'm bumping into a problem where I'm not able to see a the three png files I've got embedded into the .css sytle sheet fro the header, container, and footer sections. Here's a look at the html & css for the page. Any recommendations on how I could code this better or fix the problem? Your help will be very much appreciated.
The site was originally built off a template so the comments in the .css are from the original author of the template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/CognosSplashScreen/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
          background-color: #000;
          background-image: url(/CognosSplashScreen/bg.jpg);
          background-repeat: no-repeat;
</style>
</head>
<body>
<div class="container">
<div class="header">IBM Cognos - Enterprise Business Portal (EBP)</div>
<div class="content">
    <h1><img src="/CognosSplashScreen/Wrench Sprocket.png" width="215" height="164" align="left" />EBP is offline</h1>
    <p>The IBM Cognos EBP has been taken offline for scheduled maintenance. Services will be restored on Wednesday, May the 2nd at 7:00 AM.    </p>
    <h3>Maintenance Details</h3>
    <p>We're currently in the process of upgrading from IBM Cognos BI version 8.3 to the most current 10.1.1. To take a look at some of the new features you'll experinece we've put together a brief overview you can download by <a href="#">clicking here</a>.</p>
    <p>10.1.1 training is available to for all users. Take a look at the list of available courses get yourself, your team, or department enrolled in a class today.    </p>
</div>
<div class="footer">
    <p> </p>
    </div>
</div>
</body>
</html>
Here's the .css
@charset "utf-8";
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #42413C;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
          padding-right: 45px;
          padding-left: 45px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
          width: 980px;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
          background-image: url(/CognosSplashScreen/PageBodyLight_02.png);
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background-image: url(/CognosSplashScreen/HeaderBubbles_02.png);
          padding-top: 57px;
          color: #CCC;
          font-weight: bold;
          padding-left: 97px;
          padding-bottom: 30px;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
          padding: 10px 0;
/* ~~ The footer ~~ */
.footer {
          background-image: url(/CognosSplashScreen/footer_02.png);
          padding-top: 5px;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;

CSS for images coded on the Web page itself is pathed relative to that Web page. CSS for images used by the external CSS file is pathed relative to the CSS file location.
If this is the link to the css file from the Web page... go to "CognosSplashScreen" subfolder and get the "oneColFixCtrHdr.css"
<link href="/CognosSplashScreen/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
.... and you don't need the leading "/" by the way.
then relative to that css file, which is already in the "CognosSplashScreen" subfolder, the path to the "HeaderBubbles_02.png" is just
background-image: url(HeaderBubbles_02.png);
not:
background-image: url(/CognosSplashScreen/HeaderBubbles_02.png);
and so forth for other image paths.
Best wishes,
Adninjastrator

Similar Messages

CSS not displaying properly in Firefox

My new CSS layout looks beautiful in IE7 (weird), however, it
is not rendering properly in Firefox. I always do research before
posting here, but I'm completely helpless now. I'm very new to CSS,
this is my first page I've layed on using this language. Pretty
much none of the top margins are working, and my faux column image
isn't displaying. I'll attach the HTML and the CSS and see if
someone can point out what is wrong with Firefox.

I'm seeing problems in FF3, Safari 3.1, and IE6. Flash code
and missing alt
tags on images won't hurt you, but some of the other
validation errors could
be effecting your layout.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.colonybeachresort.com%2FCSS_T esting%2F
In addition, you've got problems with those png images and
alpha-transparency. They do not render well in IE6 without
some sort of png
fix JavaScript. Given that many people still use IE6, you
might want to
switch to jpgs for backgrounds.
IE net renderer for checking web sites
http://ipinfo.info/netrenderer/
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"nowherecreative" <[email protected]> wrote
in message
news:g6ak8o$2iv$[email protected]..
> Here is the link to the site.
>
http://www.colonybeachresort.com/CSS_Testing/
> If you view it in IE7 it looks great. When you view it
in Firefox the top
> margins aren't working ... for example, the whole site
is supposed to
start
> right from the top (no space between the top of the
browser window and the
> content, as seen in IE7). Also, the background of my
columns are not
showing
> up, you can really see the difference when you compare
them between the 2
> browsers.
>

Chinese characters are not displayed in the Firefox bookmarks

Chinese characters are not displayed in the Firefox bookmarks. The name looks like e.g. "??????? ???? cn.nytimes.com"
Chinese character of the site name is displayed ok in the head of the browser window and there is no problem reading chinese web content. I use Firefox Portable 11 /English from portableapps.com in Windows XP.
I googled and got some tips:
1) Set your browser to recognise Chinese language internet sites.
Windows users: Under "Tools - Options" on your browser's menu-bar add Chinese to the languages list.
- I did this.
2) Set your browser's "Character Set" or "Encoding" to UTF-8 (sometimes also called Universal Alphabet or Unicode).
Encoding settings can be changed under the "View" option in your browser's menu-bar.
- It was already set to UTF-8.
3) Windows users: If Chinese text still does not display correctly, East Asian language support may need to be enabled.
- This has been done when I installed Windows.
I still don't get any Chinese fonts in the bookmark names. I can edit the bookmark name with chinese characters and then save the bookmark, it works fine. But why does not Firefox recognize the characters when saving bookmarks? Help is appreciated.

No I didn't change anything deep beneath the hood. My problem didn't apply to the URL, but to the name of the link or bookmark header or whatever you would like to call it. (When hitting Ctrl + D there is a Name field). I only got ???????? instead of chinese characters in the name. Also for e.g. www.cntv.cn ...but maybe all China is not in the whitelist either. ;-) But anyway, this was not the real problem for me.
Apparently I was wrong as after a reboot of the computer it worked. The solution seemed to be to add Chinese to the language list. I don't know why it was not enough to restart Firefox?
Now I only have problems to show chinese characters in the name field of my external link manager... But I guess it is not an issue for Mozilla.

Thumbnails are not displayed correctly in Firefox, but displayed correctly in Safari and G. Chrome

Firefox display problems regarding this customers site:
http://gardenia.dk/collections/collection/
Thumbnails are not displayed correctly in Firefox - only a tiny bit of the picture is visible, incorrect scale (displayed correctly in Safari and Google Chrome).
Can I do anything to make it work in Firefox, too?
Kind regards,
Annette

This article might help you-
https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently

Blog not displaying in Chrome...looks like prototype.js issue

I have an iWeb page with a blog, and the blog does not display in Chrome. If you look at the javascript console, there is an error:
Uncaught TypeError: Object [object HTMLDivElement] has no method 'selectFirst'
adjustLineHeightIfTooBigiWebSite.js:604
onPageLoadGlenns_Blog.js:9
(anonymous function)Glenns_Blog.html:46
onloadGlenns_Blog.html:47
window.onloadchrome-extension://aonjhmdcgbgikgjapjckfkefpphjpgma/measureIt.js:42
Googling around, this looks like a Chromium issue, but I can't find anything newer than 2008. Looking at the code (line 604 in iWebSite.js), there is this:
{oTextBoxInnerDiv=oTextBoxOuterDiv.selectFirst("div.text-content");if(oTextBoxIn nerDiv)
In this case oTextBoxOuterDiv is an HTMLDivElement, not a prototype-enhanced DOM element, so selectFirst is not defined on it. Odd, though, that this works in all other browsers. In Firegox, oTextBoxOuterDiv is a prototype-enhanced DOM element, so it works.
Any ideas why Chrome acts this way?
Thanks,
Glenn

aferris wrote:
>
> If I try to use the forum search functionality, without signing in,
> with any recent build of Google Chrome then I do not see the captcha
> image box. Since I can't fill out the captcha box I can't search.
> It's due to Chrome not displaying the insecure content on an
> otherwise secure page. We've just recently changed our captchas to
> use a secure service to avoid exactly this issue. Could something
> like that be done for the Novell forums? I know I can log in but
> sometimes it's nice just to look and search.
>
> thanks,
> Andrew
I'll pass this on to the forum administrator.
Thanks for pointing it out.
Kevin Boyle - Knowledge Partner
If you find this post helpful and are logged into the web interface,
show your appreciation and click on the star below...

New user of Firefox. Webpage I made not displaying correctly in Firefox but OK in Win IE. Why is this?

Im new to Firefox. Just found out the website Im maintaining does not display correctly with Firefox but OK with Win IE. Why is this?
== This happened ==
Every time Firefox opened

I'm going to make a prediction here:
The webpage will contain a lot of code written specifically to the non-standards compliant way IE works, and will also "not display correctly" in the following standards compliant browsers:
Chrome
Safari
Opera
and the solution will be to code the pages according to the standards meant to be followed so it displays correctly in all non-IE browsers, '''then''' see how it displays in IE.

Certain special characters do not display correctly in Firefox ( font COLOR="#1f1a17" FACE="Symbol" SIZE="3" ¬ /font ). Is there a fix?

Certain special characters which display correctly in Explorer do not display correctly in Firefox. Example: <font COLOR="#1f1a17" FACE="Symbol" SIZE="3">¬</font>
Is there a fix?

The symbol font usually doesn't work in Firefox, a website needs to use an Unicode replacement or an HTML entity to specify such a character.
See:
*[https://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#Why_aren.e2.80.99t_symbol.2fdingbat_fonts_working.3f Why aren’t symbol/dingbat fonts working? - MDC FAQ]
*http://en.wikipedia.org/wiki/Unicode_symbols
*http://en.wikibooks.org/wiki/Unicode/Character_reference/2000-2FFF

Animation not displaying properly in Firefox

My animation not displaying properly in Firefox. I have searched this forum and others but am only able to find outdated solutions (such as updating to the latest release of Animate). I am on the most current versions of Animate and Firefox and still having problems. Does anyone know of a solution to this, or can direct me to a discussion that already covers it?
An interesting thing to note is that only the center tree is acting differently, though the commands for each seem to be the same. Also the small mountains are fine, but not Mt Rainier.
Here is my test page:
http://jonnyart.com/test/NewYearsAnimation
Thanks!

In case anyone else runs into this issue, I was able to resolve it by rebuilding those portions of the animation.

TDF not displaying properly in Firefox 4

Hi, just an FYI to the TDF team...the web version is not displaying properly in Firefox 4.0.1. The main browser window (for lack of a better description) is slightly off-set maybe 10 - 15 pixels down and to the right. Because of this it covers up some of the TDF navigation tabs.

In case anyone else runs into this issue, I was able to resolve it by rebuilding those portions of the animation.

USF on iTunes U collections such as Sustainability and iteach Initiative are not displaying new items even days after they are uploaded to the collections. The items show in the Preview of the collections but not Live view. not displaying

USF on iTunes U collections such as Sustainability and iteach Initiative are not displaying new items even days after they are uploaded to the collections. The items show in the Preview of the collections but not Live view. not displaying

Greetings;
This seems to an ongoing issue (see related discussion link). We've been experiencing the same update lag since last Friday. The new additions to the Collection appear and are accessible in both the iPad and iPhone applications, but even though they additions appear in "Quick View", the material doesn't appear in the Collection itself. Apple is aware of the issue and is investigating. All the best...
Syd Rodocker
Tennessee State Department of Education
https://discussions.apple.com/message/15461971#15461971

CSS not displaying properly

My CSS file includes the following formatting for a "Note":
p.Note {
border-left-style: Solid;
border-right-style: Solid;
border-top-style: Solid;
border-bottom-style: Solid;
background-color: #fafade;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 9pt;
line-height: 12pt;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-color: #a3a5a7;
border-right-color: #a3a5a7;
border-top-color: #a3a5a7;
border-bottom-color: #a3a5a7;
margin-top: 12px;
x-next-class: ;
x-next-type: P;
margin-bottom: 12px;
In IE 11, not using Document Mode=Edge, the CSS is applied as expected:
In IE 11, using Document Mode=Edge, the CSS is not applied as expected:
I suspect the issue is with the CSS itself. The CSS displays correctly in the Design view of the topic in RH10, but does not display correctly if I view the topic using the CTRL+W command from within RoboHelp, and does not display correctly in the compiled project when viewed in Chrome or FireFox. Any ideas? Thanks!

If I have to guess, I would say it has to do with the name of the style.
Your HTML probably uses lower case while your selector in the CSS starts
with a capital letter.
Try the following selector:
p.note,
p.Note {
That should solve it.
Kind regards,
Willam

CSS not displaying in preview

For some reason, with one particular site I am working on,
when I preview my page, the CSS styles do not display - they show
as a default font. However, I know the file is linked and in the
correct location in the root folder. All the CSS shows up fine in
design mode and when i upload the page to my server, just not when
i preview in any browser.
it's just kind of annoying and slowing me down - any idea why
this might be happening?

Is the stylesheet linked with a root relative link? Are you
using temp
files to preview the page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"BullocksTroy" <[email protected]> wrote in
message
news:e6na5l$egj$[email protected]..
> For some reason, with one particular site I am working
on, when I preview
> my
> page, the CSS styles do not display - they show as a
default font.
> However, I
> know the file is linked and in the correct location in
the root folder.
> All the
> CSS shows up fine in design mode and when i upload the
page to my server,
> just
> not when i preview in any browser.
> it's just kind of annoying and slowing me down - any
idea why this might
> be
> happening?
>

Template not displaying correctly in firefox

Hello,
it's probably a question you've answered a thousand
times...I'm totally new to designing pages so I used a template
from DW (from sample, starter page, personal training homepage). I
have only modified some text, and after uploading to my host to
have a look at it, it displays incorrectly in Firefox, but fine in
IE. However, when i preview the page from DW with F12, it opens in
firefox in local mode and looks like it's intended to look.
I have tried uploading the template without any modification
and the firefox problem is still there...
Am i missing something ?
have a look : www.englishcoaching.fr
Thanks in advance !
Belinda

Look at the code.
You have several broken links on the page you have uploaded -
<link rel="stylesheet" href="file:///E|/Documents and
Settings/Administrator/My Documents/Unnamed Site
2/mm_training.css"
type="text/css" />
Note that the stylesheet link is pointing at a file on your
hard drive,
which certainly will not work on the web. This is usually the
mark of an
improperly defined local site. You do have a local site
defined, right?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Bear_Malin" <[email protected]> wrote in
message
news:foenkl$su$[email protected]..
> Hello, it's probably a question you've answered a
thousand times...I'm
> totally
> new to designing pages so I used a template from DW
(from sample, starter
> page,
> personal training homepage). I have only modified some
text, and after
> uploading to my host to have a look at it, it displays
incorrectly in
> Firefox,
> but fine in IE. However, when i preview the page from DW
with F12, it
> opens in
> firefox in local mode and looks like it's intended to
look. Am i missing
> something ? have a look : www.englishcoaching.fr Thanks
in advance !
>

Png files with transparent background show black only in firefox for android

I have a wix created site and png files with transparent backgrounds are showing with a black blackground in Firefox for Android. They show transparent in all other browsers I have tried.
I have tried saving the file as a gif, as a smaller png, interlaced, not interlaced, png 8, png24. It still shows black in Firefox for Android.

Hi evelswoman,
Thank you for your question. This sounds like a good one for the web compatibility team. Currently there are some compatibility documentation for background-image here: [https://developer.mozilla.org/en-US/docs/Web/CSS/background-image] and more details on background: [https://developer.mozilla.org/en-US/docs/Web/CSS/background]
Filling a bug with webcompat.com with an example url can go a long way as well, I hope this helps.

RoboHelp 8 WebHelp: Some images not displaying in Chrome or Firefox Browsers

(I'm using RH8 v 8.0.2.208 under XP SP3, all latest Windows updates. Building to a WebHelp output.)
I have many topics in which the images have a Fade In effect (Dynamic HTML Effect > Page has been loaded > Fade in). I build it into WebHelp.
This works beautifully in IE8, but in Google Chrome, and Firefox, there is no fade in (I can live with that I suppose) BUT some images are there, some are not - just white space where the image should be. I get identical problems, topic-for-topic, in Firefox and Chrome. Some fade-in images display, some don't. They are a mix of JPG and GIFs.
Can anybody throw light on this?
Help!

laurenrobertson88 wrote:
> I created my site using CSS divs, php and HTML and was
testing it using safari
> (as i am a Mac user) and everything looks correct. I
then went to view and test
> the site on Firefox and IE and some (not all) of the
images are not displaying.
> I have tried re-uploading, checking the paths and i cant
see a soloution. I am
> currently testing the site here:
>
http://www.omobono.co.uk/test/sapient/indexcss.php
>
> i cant figure it out - help!
Using Firefox on my PC I get 3 images missing:
1.
http://www.omobono.co.uk/test/sapient/images/logo.jpg
2.
http://www.omobono.co.uk/test/sapient/images/nav_home_over.jpg
3.
http://www.omobono.co.uk/test/sapient/images/mainline.jpg
When I try to view them I get this error message:
The image
http://www.omobono.co.uk/test/sapient/images/mainline.jpg
cannot be displayed, because it contains errors.
Maybe try exporting the images again and uploading again? A
quick google
shows it could be the colour settings, make sure they are set
to RGB,
not CMYK.
Steve

Png files referenced in css not displaying in Chrome & Firefox after after PUT

Similar Messages

Maybe you are looking for