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?
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;
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.
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
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.