Hey folks, I have an issue which is really annoying me.
I am working on a site layout which was going fine until I seemed to get stuck on something which should be so easy.
Here is the link: http://www.imgd.co.uk/sites/yrm/
There are 3 thumbnail images which are inside an unordered list. This list items have a class name of ‘thumbcontainer’. I have attached the HTML code here:
<div id="homethumbs"><ul>
<li class="thumbcontainer"><img src="img/home-thumb1.jpg" alt="thumb1" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
<li class="thumbcontainer"><img src="img/home-thumb2.jpg" alt="thumb2" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
<li class="thumbcontainer"><img src="img/home-thumb3.jpg" alt="thumb3" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
</ul></div>
This is the CSS which im having issues with:
#homethumbs ul li.thumbcontainer {
background:url(img/thumb-bg.jpg);
background-repeat:repeat-x;
width:318px;
height:255px;
display:inline;
overflow: hidden;
float:left;
margin:1px;
}
I use the Mozilla web developer tools as add on and bizarrely the background shows up when I use the ‘edit css’ tab. Other than that my code doesn’t work.
Please can someone tell me what is wrong?