Strictly a CSS issue

  • This doesn’t really have anything to do with WP, but I’m having trouble with my site. For some reason, my header image isn’t showing up in Firefox, but shows fine in IE. I thought it was because it is a png, but my background image is also png and it is showing up. Both are set in the CSS as background images of a section (bg for body, header image in header div).
    Can anyone give me any suggestions as to why it won’t show up? The site is at: https://www.wifetalks.com

Viewing 3 replies - 1 through 3 (of 3 total)

  • If I right-click where the background image should be, and select “View Background Image”, it loads. One thing though, the image is 156k in size. That’s *huge*. Someone on dialup will be screwed.
    Now, on to the CSS: you’ve defined the background image for the #content div, not the #header div. You’ve got #header set to display:none.
    Try this instead:
    remove the background image from #content. Change your header section slightly to make the heading an h1 instead of an h2 (it’s the main heading on your page, so should be an h1, plus the search engines will like it better.)
    Next, change your CSS for #header and #header h1 to this:
    div#header { height: 225px; background: url(pears.png) no-repeat 0 0; }
    div#header h1 { margin: 0; padding: 0; display: none; }
    That should do it…

    I think tcervo is on the right track here about the image size. I recently had the same problem when I created a background image in Gimp and the JPEG quality setting was accidentally left at 100%, making the file 800KB. After I made a lower quality version about 11KB big, it loaded fine in firefox.

    Thread Starter rayne

    (@rayne)

    tcervo: Thanks. I moved the image to the header div instead of the content div and it seemed to work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Strictly a CSS issue’ is closed to new replies.