Possible CSS problem

Discussion in 'CSS' started by captainron19, May 17, 2011.

  1. #1
    Just noticed this on a web page I ru for a friend of mine located at www.njsmpa.org

    At the bottom there are (well there should be) 2 boxes with one reading "Resources" and the other "From the President" one has a gavil and the other has a photo.

    When I view the page with Mozilla Firefox everything looks fine but I happened to view the page today with IE and it is showing 4 of those boxes at the bottom.

    I looked at the coding and could not find a problem but I am assuming it has something to do with the CSS.

    Anyone have an idea?
     
    captainron19, May 17, 2011 IP
  2. secretdesign

    secretdesign Well-Known Member

    Messages:
    797
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    3
    #2
    Put no repeat for images.
     
    secretdesign, May 17, 2011 IP
  3. captainron19

    captainron19 Active Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #3
    In the CSS file or in the page itself. And how exactly is the coding for that? Not a lot of experience with CSS as the file was already made for me and I just had to edit it in a few parts.
     
    captainron19, May 17, 2011 IP
  4. secretdesign

    secretdesign Well-Known Member

    Messages:
    797
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    3
    #4
    In css where you have
    #resources-img, #president-img {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/pic_2.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    float: left;
    font-size: 9px;
    font-weight: bold;
    height: 23px;
    margin-right: 18px;
    padding-top: 90px;
    text-align: center;
    width: 112px;
    }
    add this line
    background-repeat: no-repeat;
     
    secretdesign, May 17, 2011 IP
  5. secretdesign

    secretdesign Well-Known Member

    Messages:
    797
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    3
    #5
    huh. Didn't saw that you have that.

    Give me few min.
     
    secretdesign, May 17, 2011 IP
  6. captainron19

    captainron19 Active Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #6
    K thanks - funny though because I am on another computer right now and before any editing everything looks fine..... it only showed up with duplicate images on my home computer which is fairly new and has a newer version of IE i am guessing. So I guess I will have to see tomorrow if the change in CSS worked as I did just re-upload the corrected file.
     
    captainron19, May 17, 2011 IP
  7. secretdesign

    secretdesign Well-Known Member

    Messages:
    797
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    3
    #7
    I know what it is. Wrong is html not css. You need to code it different. Padding made that.
     
    secretdesign, May 17, 2011 IP
  8. captainron19

    captainron19 Active Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #8
    So is it still appearing with double images after I changed the CSS file?

    I looked over the html coding and really didnt see any errors or what might be wrong in there
     
    captainron19, May 17, 2011 IP
  9. secretdesign

    secretdesign Well-Known Member

    Messages:
    797
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    3
    #9
    I g2g now. PM me tomorrow and I will help you. ;)
     
    secretdesign, May 17, 2011 IP
  10. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Agreed on this note ... post up your CSS so I can see what's going on with your div structure.
     
    sburst, May 18, 2011 IP
  11. smashylee

    smashylee Peon

    Messages:
    79
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You can see the CSS from the source code...


    perhaps if you change it to this

    #resources-img {
    background: url(images/pic_2.jpg);
    background-repeat: no-repeat;
    width: 112px;
    height: 23px;
    float: left;
    margin-right: 18px;
    text-align: center;
    padding-top: 90px;
    font-size: 9px;
    font-weight: bold;
    }

    #president-img {
    background: url(images/pic_3.jpg);
    background-repeat: no-repeat;
    width: 112px;
    height: 23px;
    float: left;
    margin-right: 18px;
    text-align: center;
    padding-top: 90px;
    font-size: 9px;
    font-weight: bold;
    }



    having it this way it looks like you have 2 different background images for the same div...

    #resources-img, #president-img {
    background: url(images/pic_2.jpg) no-repeat;
    width: 112px;
    height: 23px;
    float: left;
    margin-right: 18px;
    text-align: center;
    padding-top: 90px;
    font-size: 9px;
    font-weight: bold;
    }
    #president-img {
    background: url(images/pic_3.jpg) no-repeat;
    }

    Im a total noob at web design and could be way wrong but this is my thought lol.
     
    smashylee, May 18, 2011 IP