Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

1px Border Issue 2

Status
Not open for further replies.

kennygadams

Programmer
Jan 2, 2005
94
US
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:
Each thumbnail is wrapped in a div with the class name img165.

Here's the CSS currently being used.
Code:
		div.img165 {
			position:relative;
			border: solid #333333 1px;
			float:left;      
			width:165px; 
			height:165px; 
			overflow: hidden;
			}
 
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]
 
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

Code:
 ____  _____
|     |     [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.
 
Thank you! Both options worked. vacunita, I especially liked your reply with the black and red borders [2thumbsup]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top