#1
  1. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    41

    Adding another BG image proving difficult


    Hmmmmm... This one has me stumped.

    Check out http://www.chrisbartlett.net/fd/fd/short.html please. That site is 100% perfect as far as the guy I'm building it for is concerned. But it is missing something.

    Now have a look at http://www.chrisbartlett.net/fd/fd/ in IE. See the "shadow" on the right? That tiny little arrow-looking image?

    In IE, I've gotten the image positioned close. I still want to drop it 10px below the top of the adjoining border.

    And it's still not even appearing in FF or Opera.

    And in all 3 browsers, I still have the problem with the entire outterbox being pushed down, which I solved with a "display: inline;", but when I do that, it disappears in IE, too!

    Every which way I turn, something goes wrong. Argh. Any thoughts, please?

    In a nutshell, it needs to look like this:


    Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    112
    Rep Power
    14
    make sure that yor box for which you are showing that bg has something in it. pxl image or something like that for Opera and Navigator, they usually dont show empty boxes(tds.divs) yeah just a hint, make sure that you specify in CSS that you want boxes to show bg if they are empty. i hope this helps

    Originally Posted by WorldBuilder
    Hmmmmm... This one has me stumped.

    Check out http://www.chrisbartlett.net/fd/fd/short.html please. That site is 100% perfect as far as the guy I'm building it for is concerned. But it is missing something.

    Now have a look at http://www.chrisbartlett.net/fd/fd/ in IE. See the "shadow" on the right? That tiny little arrow-looking image?

    In IE, I've gotten the image positioned close. I still want to drop it 10px below the top of the adjoining border.

    And it's still not even appearing in FF or Opera.

    And in all 3 browsers, I still have the problem with the entire outterbox being pushed down, which I solved with a "display: inline;", but when I do that, it disappears in IE, too!

    Every which way I turn, something goes wrong. Argh. Any thoughts, please?

    In a nutshell, it needs to look like this:


    Thanks!

    Chris
  4. #3
  5. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    41
    Originally Posted by gnrlbzik
    make sure that yor box for which you are showing that bg has something in it. pxl image or something like that for Opera and Navigator, they usually dont show empty boxes(tds.divs) yeah just a hint, make sure that you specify in CSS that you want boxes to show bg if they are empty. i hope this helps
    Hmmm... I appreciate the reply, but that doesn't really help me, partially because I'm not sure I understand. Something in it? The BG image is set in CSS, so wouldn't that constitute "something in it"?

    Have a look at the code, you'll see what I mean.

    Thank you for the reply!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    Haven't had time to look to much at the code, but here is a tip.
    You don't really need the #top div. Rather use the elements you already got. You can have different background images for html and body.


    Code:
    html {
    background: url(./images/back_repeat.png) repeat;
    background-color: #ffffff;
    }
    
    body {
    background: url(./images/back_top.png) repeat-x;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: .8em;
    color: #333333;
    text-align: center;
    }
  8. #5
  9. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    41
    Akh,

    Thanks for the reply. If you could have a deeper look, I'd appreciate it greatly. I think you might be right about eliminating the TOP div, and i will look at that. At this point, though, with the layout basically done, I want to do as little as possible to disrupt it. LOL!

    Is there any way to simply add the shadow image to what I already have?

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    This looks ok in firefox 1.5 haven't tested it in other browsers, so beware it might contain errors
    Note: in my test I had removed the #top style.
    Code:
    html {
    background: url(./images/back_repeat.png) repeat;
    background-color: #ffffff;
    margin:0;
    padding: 0;
    
    }
    body {
     background: url(./images/back_top.png) repeat-x;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: .8em;
    color: #333333;
    text-align: center;
    margin:0;
    padding:25px 0;
    }
    
    
    #shadow {
    background:url(./images/shadow.gif) 100% 0 no-repeat;
    margin: 0px auto;
    width: 724px;
    height: 139px;
    }
    
    #outterbox {
    margin-top:-150px; 
    ...
    }
    Last edited by Akh; January 9th, 2006 at 02:40 PM.
  12. #7
  13. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    41
    Brilliant! Thanks, man.

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!

IMN logo majestic logo threadwatch logo seochat tools logo