1px Border Issue 2

[kennygadams]

What is the best way to get these preview thumbnails to appear to have 1px borders? Currently when they align each other, side-by-side, they appear to have 2px borders.

Here's my test page:

http://www.hittoon.com/t

Each thumbnail is wrapped in a div with the class name img165.

Here's the CSS currently being used.

		div.img165 {
			position:relative;
			border: solid #333333 1px;
			float:left;      
			width:165px; 
			height:165px; 
			overflow: hidden;
			}

 

[Vragabond]

It's best to add them margins of -1px on top and left. This way they will overlap the borders of the previous element, making it look like a single border. Other way is to use a table (this might not be a good idea if you want to dynamically add different number of images, as table does not behave well in those settings).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

Another way might be to only give your thumbnails borders on one side, and have your container provide the borders for thermissing sides. such as

 ____  _____
|     |     [red]|[/red]
|     |     [red]|[/red]
|     |     [red]|[/red]
|[red]_____[/red]|[red]_____|[/red]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[kennygadams]

Thank you! Both options worked. vacunita, I especially liked your reply with the black and red borders