9 Replies - 9229 Views - Last Post: 24 August 2009 - 03:34 AM

#1 peaceread.org   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-August 09

CSS background .jpg won't display in Chrome or IE

Post icon  Posted 18 August 2009 - 08:24 AM

Hi,

I am working on a website for a class about peace books
. The homepage seemed to be working fine in dream weaver (mac), so I launched it online to test the live version in non mac browsers (chrome and i.e.). The background image of the header won't show up in Internet Explorer or Google Chrome, but displays fine in Fire Fox, Opera and Safari. You can view the website at the domain http://www.peaceread.org/ if that would help.

Additionally I have included below the relevant html and CSS:

Display Code:

[code]<div id="header">
<ul> <li><a href="http://www.peaceread.org" title="Peace Read">Peace Read Home</a> |</li> <li><a href="http://www.peaceread.org/peace-books.html" title="Peace Books">Peace Read Titles</a> |</li> <li><a href="http://www.peaceread.org/peace-quotes.html" title="world peace quote">Peace Quotes</a> |</li> <li><a href="http://www.peaceread.org/peace-videos.html" title="Peace video">Peace Videos</a> |</li> <li><a href="http://www.peaceread.org/peace-video-games.html" title="Peace video game">Peace Games</a> |</li> <li><a href="http://www.peaceread.org/peace-resources.html" title="Peace Resources">Resources</a> </li>
</ul>
</div> [code]

Externalized CSS: (the specific element that won't display is background-image:url(peaceimages/Peace-Header-Background1.jpg);

[code]#header {
background-color:#FFFFFF;
background-image:url(peaceimages/Peace-Header-Background1.jpg);
background-repeat:no-repeat;
padding-top:150px;
text-align:center;
}
#header ul {
list-style-type:none;
margin:0;
padding:0;
}
#header ul li {
display:inline;
}
#header h1 {
margin:0;
padding:10px 0;
}
#header a:link {
color:#CCFFFF;
font-size:14px;
text-decoration:none;
}
#header a:visited {
color:#CCFFFF;
font-size:14px;
text-decoration:none;
}
#header a:hover {
background-color:#0099CC;
font-size:17px;
}
#header a:active {
color:#CCFFFF;
font-size:14px;
text-decoration:none;
[code]


Please help with an answer to this question.

Thank You and Best Regards,

Will

Is This A Good Question/Topic? 0
  • +

Replies To: CSS background .jpg won't display in Chrome or IE

#2 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 08:38 AM

Nothing Comes up for that link you provided?
Was This Post Helpful? 0
  • +
  • -

#3 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 11:03 AM

Did you figure it out - next time close your code tags:

:code:
Was This Post Helpful? 0
  • +
  • -

#4 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 11:16 AM

A good start is always to validate your code against W3C standards this can be done at http://validator.w3.org/.

I did a go on your site and got this result.

Fix those problems/errors and see if it doesn't help! :)

This post has been edited by Wimpy: 18 August 2009 - 11:16 AM

Was This Post Helpful? 1
  • +
  • -

#5 arthurakay   User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 11:33 AM

If I had to guess, it's because you've defined BOTH a "background-color" and a "background-image"... the point being that I think one value (color) has overwritten the other. You define the background-color second, so that would make sense.

I'd rewrite those lines as:
#header {
  background: #fff url('peaceimages/Peace-Header-Background1.jpg') no-repeat;
  padding-top: 150px;
  text-align: center;
}



Learn to reduce the number of lines in your CSS files. Efficiency is king and will reduce the number of errors like this.
Was This Post Helpful? 1
  • +
  • -

#6 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 12:30 PM

Quote

Learn to reduce the number of lines in your CSS files

You really should add "but don't reduce the number of lines to an extent where it becomes ridiculous", or something like that. Combining properties like you did is a very nice way of reducing lines, but to do something like this:
#mydiv .myclass a { background: #fff url(/path/to/image.png) no-repeat; border: 1px solid #000; text-align: justify; padding: 50px; }
is just ridiculous, and also very annoying to both see and maintain!
Was This Post Helpful? 0
  • +
  • -

#7 arthurakay   User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 18 August 2009 - 12:59 PM

View PostWimpy, on 18 Aug, 2009 - 12:30 PM, said:

You really should add "but don't reduce the number of lines to an extent where it becomes ridiculous", or something like that. Combining properties like you did is a very nice way of reducing lines, but to do something like this:
...is just ridiculous, and also very annoying to both see and maintain!


Agreed. The idea is to simplify CSS statement for (1) efficiency and (2) readability/maintainability. Clean code makes everyone's life easier.

Reducing lines (e.g. minifying files) has its own benefits, but that wasn't where I was going with it.
Was This Post Helpful? 1
  • +
  • -

#8 bgonzales999   User is offline

  • D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 07-February 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 22 August 2009 - 03:48 PM

I guess you figured this out because it works in chrome for me.
Was This Post Helpful? 0
  • +
  • -

#9 peaceread.org   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-August 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 23 August 2009 - 09:37 PM

View Postbgonzales999, on 22 Aug, 2009 - 02:48 PM, said:

I guess you figured this out because it works in chrome for me.



Yes, I figured it out. It turns out that the code works fine, but the image file was damaged.

Thanks for the help everyone!

View PostWimpy, on 18 Aug, 2009 - 10:16 AM, said:

A good start is always to validate your code against W3C standards this can be done at http://validator.w3.org/.

I did a go on your site and got this result.

Fix those problems/errors and see if it doesn't help! :)



Thanks,

I fixed most of the validations errors. It didn't really change anything functionally (mostly forgot to close tags which makes it valid html, but not xhtml), but it's good that the code is stronger now.

The problem turned out to be that the image file was corrupt. After all that stress over the code.
Was This Post Helpful? 0
  • +
  • -

#10 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: CSS background .jpg won't display in Chrome or IE

Posted 24 August 2009 - 03:34 AM

Glad you got it to work! :)

View Postpeaceread.org, on 24 Aug, 2009 - 06:37 AM, said:

Thanks,

I fixed most of the validations errors. It didn't really change anything functionally (mostly forgot to close tags which makes it valid html, but not xhtml), but it's good that the code is stronger now.

The problem turned out to be that the image file was corrupt. After all that stress over the code.

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1