homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

firefox not displaying css images but ok in safari
need help getting firefox to show css image

 11:50 am on Mar 15, 2010 (gmt 0)

I have been looking for this problem for ages and entered your forums covering this subject with others but as they are personal to their sites it is difficult to relate to.
The background header image shows up fine in Safari but when i try the webpages in FF the image does not display. The site is a long way from finished but i need to sort this problem first. I have hosted it on my other site as I do not have a host for this site as yet.

@charset "utf-8";
body {
font-family:"Baskerville Old Face";
background: #101415;
margin: 0;
padding: 0;
color: #000000;
h1 {
#container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

#header {
width: 900px;
height: 215px;

#header .headerBackground2 {
width: 900px;
height: 180px;
background:url(../images/headerBackgroundtitle.jpg) no-repeat;
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 200px 40px 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
margin:20px 40px 20px 0;
#sidebar1 a, #mainContent a {
font-weight: bold;
#mainContent {
margin: 20px 70px 40px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */

#footer {
background:url(../images/footerBackground.jpg) repeat-x left top;

#footer p {
margin:0 240px 0 0;

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
font-size: 1px;
line-height: 0px;
/*begin main menu*/
#navcontainer {
margin:auto 0;
#navcontainer ul {
padding: 0;
margin: auto 0;
background: url(../images/menuBackground.gif) repeat-x left top;
float: left;
width: 100%;
#navcontainer ul li {
display: inline;
#navcontainer ul li a {
color: #626161;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
padding:10px 25px;
#navcontainer ul li a:hover {
background: url(../images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;
#navcontainer ul li #current {
background: url(../images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;

/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(../images/dot.gif) 0 0 repeat-x;}
.b {background:url(../images/dot.gif) 0 100% repeat-x}
.l {background:url(../images/dot.gif) 0 0 repeat-y}
.r {background:url(../images/dot.gif) 100% 0 repeat-y}
.bl {background:url(../images/bl.gif) 0 100% no-repeat}
.br {background:url(../images/br.gif) 100% 100% no-repeat}
.tl {background:url(../images/tl.gif) 0 0 no-repeat}
.tr {background:url(../images/tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end border corners*/
/* begin news border corners*/
.n_t {background: #eeeeee url(../images/n_dot.gif) 0 0 repeat-x;}
.n_b {background:url(../images/n_dot.gif) 0 100% repeat-x}
.n_l {background:url(../images/n_dot.gif) 0 0 repeat-y}
.n_r {background:url(../images/n_dot.gif) 100% 0 repeat-y}
.n_bl {background:url(../images/n_bl.gif) 0 100% no-repeat}
.n_br {background:url(../images/n_br.gif) 100% 100% no-repeat}
.n_tl {background:url(../images/n_tl.gif) 0 0 no-repeat}
.n_tr {background:url(../images/n_tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end news border corners*/

/* start of lightbox styles*/
#lightbox{position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox2/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;}
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/* End of lightbox styles*/

[edited by: incrediBILL at 12:13 pm (utc) on Mar 15, 2010]
[edit reason] removed URL, see TOS #13 [webmasterworld.com...] [/edit]



 12:05 pm on Mar 15, 2010 (gmt 0)

It doesn't show up in Chrome, which uses the same engine as Safari, or Opera either. Going to the address of your images does not show anything there.


 2:24 pm on Mar 15, 2010 (gmt 0)

Does that give any ideas to what the problem is?


 6:01 pm on Mar 15, 2010 (gmt 0)

Going to the address of your images does not show anything there.

Maybe they are cached which is the only reason they are showing up in other browsers? Examine the above quote carefully, this may be the problem.


 9:41 am on Mar 16, 2010 (gmt 0)

I emptied the cache in safari and the image still appears. Surely there must be an image 'there' or it wouldn't show in safari.



 5:56 pm on Mar 16, 2010 (gmt 0)

Did you try this in the offending browser, exchanging example.com for your actual domain?


Another possibility, when you upload the file, some FTP clients will set the uploaded files to lower case by default. So while your CSS says /images/headerBackgroundtitle.jpg, check the server version to see if it is actually



 9:21 pm on Mar 16, 2010 (gmt 0)

Problem solved.

Thanks to all especially rocknbil who directed me to the image. checked image info and found it still had some adobe properties associated with it and wasn't a true .jpg.



 4:09 am on Mar 17, 2010 (gmt 0)

Well . . .thanks but . . . it was drhowardfine in post #2. :-)


 10:19 am on Mar 17, 2010 (gmt 0)

A big thanks to drhowarddrfine :-)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved