help for border color to hyper thumb.

[bazz]

Hi,

Unless I put the border="whatever" into my html, I can't seem to achieve the desired result. If I add it to my css, I still get the default (horrid) colors around the thumbs.

I'm trying to give the images a 1px white border - not the li.

here's the css

#thumbs {
float : right;
width : 160px;
overflow : visible;
color : #000;
background-color : #ebebeb;
margin-left : 10px;
border-left : 1px solid #b3b3b3;
}

ul#thumbnail_imgs {
float : right;
width : 130px;
background-color : transparent;
border : 1px solid #ffffff;
text-align : right;
list-style-type : none;
margin : 0 10px 0 0;

}

ul#thumbnail_imgs li {
margin : 25px 10px 25px 0;
border : 0;
}




Bazz

[ronaldb66]

The missing link, being the markup, would be rather nice to have as well.

[bazz]

Ooops,

html




<div id="thumbs">
<ul id="thumbnail_imgs">


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image1.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image1.jpg" title="title" alt="title" /></a>
</li>


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image2.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image2.jpg" title="title" alt="title" /></a>
</li>


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image3.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image3.jpg" title="title" alt="title" /></a>

</li>


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image4.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image4.jpg" title="title" alt="title" /></a>
</li>


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image5.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image5.jpg" title="title" alt="title" /></a>
</li>


<li><a href="/cgi-bin/accommodation_mainpage?client=Ennislare-House_Enn_GH5_Bangor_Down_00000008&subject=enlargement&size=500x333&img=image6.jpg"><img src="http://cms.mydomain.com/cgi-bin/ProPics/mask.pl?client=Ennislare-House_Down&size=100x100&img=image6.jpg" title="title" alt="title" /></a>
</li>


</ul></div>

[sesshyzkidz]

You want a 1px white border around all of the images, grouping them together, or around each image?

[bazz]

just a 1px border around each image so that the default border, which linked images get, is removed. On hover, I want the border to be #cccccc; but I was going to work on that bit after I could eliminate the default border.

Bazz

[sesshyzkidz]

ul#thumbnail_imgs li a img { border: 1px solid #cccccc; }

I'm sure you've already tried this, but that should work. . .

[bazz]

ul#thumbnail_imgs li a img { border: 1px solid #cccccc; }

I'm sure you've already tried this, but that should work. . .

Well, I thought I had but obviously not :rolleyes: coz - that works. :cool:

Thanks sesshyzkidz :thumbsup:

Bazz

[sesshyzkidz]

Sometimes, it's the simple things that evade us. :thumbsup: