Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox not displaying background image

    My new theme for http://jakpea6.mybesthost.com/ displays perfectly in Internet Explorer however in Firefox the large background image between the header and footer just won't show up. The background image is set as a property in CSS for a Div called 'page' that surrounds 2 other divs 'content' and 'menu' which are floated left and right respectively.
    Code:
    .page {
     width: 700px;
     background: #000000 url(images/body.jpg);
    }
    Code:
    <div class="header">
    	Header Stuff
    </div>
    <div class="page">
    <div class="content">
    	<div class="posttitle">
    		Title
    	</div>
    	<div class="postcontent">
    		Content
    	</div>
    	<div class="postdetails">
    		Details
    	</div>
    	<br><br>
    </div>
    	<div class="menu">
    		<div class="menuheading">Heading</div>
    		<div class="menuitems">Items</div>
    	</div>
    </div>
    <div class="footer">
    	Footer
    </div>
    That's some of the HTML code where those divs are layed out (I've removed all the Wordpress code to make it easier to see)

    I've validated my CSS (except for some small recommendations such as I haven't specified a color where there is a background color etc. which wouldn't cause this error)

    I tried to validate my HTML but it didn't validate but the only things that were wrong that showed up were stuff from the banner ad my server puts on the top of the page and some code they put at the bottom so it seems the problem isn't with my code being 'non-standard' or anything.

    I just don't know why Firefox doesn't display the background image, it's obviously handling the div alright because the page is layed out correctly and only the image is missing.

  • #2
    Regular Coder
    Join Date
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its not that bg isnt shown, that div is not there
    if you floated everything inside, that div is empty, see? and since it has no height set, why would it show?

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I don't think it's a float issue.
    Using the Web Dev toolbar in FF, it's possible to see that the element with class .page has a 'physical' height.

    I think the problem is much simpler.
    From what I can tell, there doesn't seem to be a filed called body.jpg in your images directory.
    If IE is showing the image, my guess is that it's reading it from the cache, whereas FF seems to be looking where you tell it to look.

    If you do a hard-refresh in IE (Ctrl+F5), it's likely that the background will stop showing in that browser as well.
    Last edited by Bill Posters; 03-29-2006 at 11:58 AM.

  • #4
    fyo
    fyo is offline
    Regular Coder
    Join Date
    Mar 2006
    Posts
    128
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bill, you're wrong about the height. DOM Inspector in Firefox shows a computed height of 0px for the div that's supposed to have the background image.

    For reference, that would be the div with class set to page below:
    Code:
    <!-- END RSI BANNER -->
    <div class="header">
    		My Blog</div>
    <div class="page">
    	<div class="content">

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw, I used the web dev toolbar to highlight the element with the page class and it showed me a box which extended beneath the fold; more than enough space for a background image to show through.
    Perhaps the web dev toolbar works slightly differently to FF's internal engine (though that would seem odd).

    Edit:

    Just double-checked using the Edit CSS facility within the Web Dev toolbar and it seems you're correct. There's no height.
    Odd (frustrating and unhelpful), that two aspects of the web dev toolbar see the page differently.



    Either way, there's still no body.jpg file in the images directory, so the solution would be a little from 'Column A' and a little from 'Column B'.
    Last edited by Bill Posters; 03-29-2006 at 12:35 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No image

    Bill's right: no image called body.jpg in the images directory.

    By the way: you might want to close up that open directory...

    If you assign a reckonizable background color to that div, it should be appearent whether or not it collapses.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did apply a background color (black) to that div to see if it would show up but it didn't. Also there is a body.jpg in the same folder as the other images as it locates the images from the index.php that is in the themes folder not directly from the index.php that calls the theme.
    ie. The images are in
    jakpea6.mybesthost.com/wp-content/themes/Theme 2/images/
    not
    jakpeat.mybesthost.com/images/

    You'll notices that there is no header, post, menu or footer .jpg's in that images folder but those seem to be alright as the are located in that first directory in which there is a body.jpg.

    I guess the problem is that in Firefox it's reading the height as 0 (which doesn't make sense because all the text content in that div is showing up fine.)

  • #8
    Regular Coder
    Join Date
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts
    rofl
    whether image is linked or not, i usually check with information/document size
    that shows all linked stuff, external scripts, images and all.

    if i outline all block level elements, and switch on information/show el.info, i cant find that div anywhere. theres nothing between #content and body

    give that div min-heigth:600px; and see what happens (not that it is a solution)

  • #9
    fyo
    fyo is offline
    Regular Coder
    Join Date
    Mar 2006
    Posts
    128
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you float all the content of a div, then that div will have a height of ZERO. Is this what is going on?

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shrinkage

    to see if it would show up but it didn't
    If you float all the content of a div, then that div will have a height of ZERO
    Yeah, that seems to be the case.
    Either include clearing, non-floated content after the floated stuff, be it generated (not for IE) or "self-inflicted" ( ), or float the div itself.
    Some other options and IE7-related info can be found at 456 Berea Street.

    Edit:
    Ah, there it is!
    Last edited by ronaldb66; 03-29-2006 at 03:32 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What IU don't get is I have another theme created much the same way but it doesn't have this problem, so does anyone have a possible solution?

  • #12
    fyo
    fyo is offline
    Regular Coder
    Join Date
    Mar 2006
    Posts
    128
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any problem with adding a div with style "clear: both" after your floated content, but still in the main div?

  • #13
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a clear both in my CSS for the Footer Div if that's what you're asking.

  • #14
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still don't know how to fix it, does anyone have a simple answer for me?

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not everything is simple about web design. I suggest you go read up on CSS and try to understand it better. Your footer is clear:both; but its not effecting anything because its not even in your main container.
    Code:
    </div>	</div>
    <div style="clear:both;">&nbsp;</div>
    </div>
    <div class="footer">
    	<div class="footer">Footer</div>
    </div>
    There is your simple answer. You need to at least try next time. If you did try I don't think you tried hard enough. Many times CSS and HTML is trial and error in the beginning.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •