CSS Gallery

[virtualadz]

hi guysI was using this gallery but until now find it it collides with my other css settings. as, there comes a border around every image, instead only gallery images. and other text settings. Is there a way to separate these gallery settings from other page layoutsHTML for gallery.

body {background-color : #eeeeee;color : #000000;text-align : center;margin-top : 5px;vertical-align : middle;}#content {width : 80%;margin-right : auto;margin-left : auto;margin-top : 5px;border : 1px solid #bbbbbb;background-color : #ffffff;padding : 5px;text-align : left;}#vertmenu {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 100%;width: 160px;padding: 0px;margin: 0px;}#vertmenu h1 {display: block;background-color:#FF9900;font-size: 90%;padding: 3px 0 5px 3px;border: 1px solid #000000;color: #333333;margin: 0px;width:159px;}#vertmenu ul {list-style: none;margin: 0px;padding: 0px;border: none;}#vertmenu ul li {margin: 0px;padding: 0px;}#vertmenu ul li a {font-size: 80%;display: block;border-bottom: 1px dashed #C39C4E;padding: 5px 0px 2px 4px;text-decoration: none;color: #666666;width:160px;}#vertmenu ul li a:hover, #vertmenu ul li a:focus {color: #000000;background-color: #eeeeee;}a:link {color: #000000; text-decoration:none; font-size: 95%}     /* unvisited link */a:visited {color: #000000; text-decoration:none; text-size: 95%}  /* visited link */a:hover {color: #000000; text-decoration:underline; text-size: 95%}   /* mouse over link */a:active {color: #000000; text-decoration:none; text-size: 95%}   /* selected link *//* Photo gallery template */*{	margin:0;	padding:0;	font-size:100%;}body{	font:80%/110% Verdana, Helvetica, sans-serif;	color:#666;	margin-top:20px;	background:#F6F5F0;	text-align:center;}a{	color:#666;	text-decoration:none;}p,h2{	margin:15px 5px;}h2{	color:#999;}#wrap{	width:720px;	margin:0 auto;	position:relative;}#header{	margin-bottom:20px;}#header a{	text-decoration:underline;}#main-content li{	width:200px;	border:solid #CCC;	border-width:0 1px 1px 0;/* uncomment and adjust this if you want a rounded frame in Mozilla browsers	-moz-border-radius:20px; */	background:#FFF;	padding:10px;	text-align:center;	position:relative;	float:left;	display:inline;	margin:5px;}#fullplate-navigation{	list-style:none;	margin:5px 0 0 45px;}#fullplate-navigation li{	display:block;	float:left;	width:210px;		}#previous{	text-align:left;}#next{	text-align:right;}#fullplate-navigation li a{	display:block;	width:190px;	padding:10px;}#fullplate-navigation li a:hover{	color:#333;}#fullplate-photo{	border:solid #EEE;	border-width:0 1px 1px 0;/* uncomment and adjust this if you want a rounded frame in Mozilla browsers	-moz-border-radius:20px; */	background:#FFF;	padding:5px 15px 15px 15px;	margin:0 auto;	width:600px;}#main-content  a span{/*\*/	position:absolute;	left:-9999px;}#main-content a:hover span{		top:10px;	left:10px;	width:202px;	font-weight:bold;	background:#FFF;	color:#999;	padding:5px 0 5px 0;	text-transform:uppercase;	font-size:80%;	border:1px solid #EEE;	border-width:0 0 10px 0;	filter: alpha(opacity=100);	/*-moz-opacity:.8;		opacity:.80;*//**/} #gallery img{	border:1px solid #EEE;/* delete line above and uncomment this for an inset effect	border:1px solid;	border-color:#666 #EEE #EEE #666; */}#foot{	padding-top:10px;	margin-bottom:20px;	clear:left;}

[real_illusions]

have a look closely in your css and pick out anything to do with#main-contentlook at the border settings and have a play around with them, see what they do.one of the css styles in there gives those gallery images a border, find out which one and take it out.