SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: overlapping background imgs

    Hi ALL,

    I am trying to overlap background images in css, and I am having trouble in firefox and mozilla. I am trying to overlap the images as background images in css because I figured that they would load faster by being written into the css.

    In Mozilla and Firefox there is a gap that appears at the top of the page, while the html and css appear to work in IE Mac and PC.

    I put the two background images in the css, one within the body tag, and one within #clipback div. The css document is attached below.

    The website I am working is built off of my own site, at the web address:
    www.andrewschaff.com/tt/index.html

    The html on this page can be viewed by clicking on the link and viewing its source.

    The css document that is attached to www.andrewschaff.com/tt/index.html is, teachertaxes_02.css, which is below.

    Thank you for your help with this. I am sure that I am missing some small bit here.

    Regards,
    Andrew


    The contents of teachertaxes_02.css is as follows:

    body {
    margin: 0;
    padding: 0;
    border:none;
    background-image:url(tt_images/tt_rpt_y.jpg);
    background-repeat:repeat-y;
    background-position:top center;
    }


    #clipback {
    background-image:url(tt_images/tt_top.jpg);
    layer-background-image:url(tt_images/tt_top.jpg);
    background-repeat:no-repeat;
    background-position: top;
    }

    #Container {
    position:relative;
    margin-left: auto;
    margin-right:auto;
    width: 700px;
    }


    #nav li {
    float:left;
    margin:290px 0 15px 5px;
    padding:0 12px 0 0;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }

    #nav a {
    float:left;
    display:block;
    margin:0;
    padding: 4px 8px;
    text-decoration:none;
    border:none;
    background:none;
    color:#003399;
    font-weight:600;
    letter-spacing: 1px;
    }

    #nav a:hover {
    float:left;
    display:block;
    margin:0;
    padding: 4px 8px;
    text-decoration:none;
    border:none;
    background:#003399;
    color:#FFFFFF;
    }



    #content {
    padding: 30px 40px 0 50px;
    }

    #content p {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    }

    #content h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:600;
    }

    #content ul {
    margin:0;
    pading:0;
    list-style:none;
    }

    #content li {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    margin:0;
    padding:0;
    }

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's weird... funnily enough setting this rule to #clipback seems to do the trick:

    Code:
    border-top: 1px solid white;
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also... what is this meant to be in ur CSS??? ---
    Code:
    layer-background-image:url(tt_images/tt_top.jpg);
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JP,

    Thanks for the tip!! How did you figure that out? As far as the layer-background deal, I saw that posted on another site, but have since taken it out.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a good thing you did remove it (by the way, welcome to SitePoint! ), since it's not even a valid CSS property.


Bookmarks

Posting Permissions

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