Possible CSS problem

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?

 

Put no repeat for images.

 

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.

 

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;

 

huh. Didn't saw that you have that.

Give me few min.

 

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.

 

I know what it is. Wrong is html not css. You need to code it different. Padding made that.

 

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

 

I g2g now. PM me tomorrow and I will help you.

 

Agreed on this note ... post up your CSS so I can see what's going on with your div structure.

 

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.