?
Solved

mysterious border in firefox

Posted on 2010-11-30
5
Medium Priority
?
594 Views
Last Modified: 2013-11-19
I have a jquery image gallery on my page which displays fine in IE8 and Safari. In Firefox however, I'm getting a white border around the entire gallery. I can't figure it out. I'm attaching the css. Please help me get rid of the border.

You can view the site in progress here:

http://realwalkthru.com/testing/churchill/gallery.php

Thanks,
Kyle firefox screenshot with white border
@charset "UTF-8";
/* CSS Document */

div.content {
	/* The display of content is enabled using jQuery so that the  content won't display unless javascript is enabled. */
	display: none;
	float:left;
	width: 699px;
		BORDER-COLLAPSE: collapse;

/*	background-color:#000;

*/}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin: 10px 0px 10px 0px;
	height: 23px;
	padding: 5px 0px;

}

div.ss-controls {
	margin:10px 0px 0px 0px;
	float: left;
}
div.ss-controls a:link{
	border:1px solid #999;
	padding:3px 5px 2px 5px;
	text-decoration: none;
	margin-left:2px;
	
}
div.nav-controls {
	float: right;
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 450px;  /* This should be set to be at least the height of the largest image in the slideshow */
	margin:0px;
	padding:0px;
	BORDER-COLLAPSE: collapse;

}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width:699px;
	height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
	margin:0px;
	padding:0px;
		BORDER-COLLAPSE: collapse;


}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: -1px;
	left: 0px;
}
div.slideshow a.advance-link {
	display: block;
	width:700px;
	height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
	line-height: 450px;  /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
	    outline: none;

}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: top;
	border: 0px solid #999;
	    outline: none;

}
div.download {
	float: right;
}




div.caption-container {
	position:relative;
	clear: left;
	height:130px;
	margin-bottom:15px;

}
span.image-caption {
	display: block;
	position: absolute;
	width: 500px;
	top: 0;
	left: 0;
	padding: 10px 0px 0px 16px;

	
	
}
#caption{
	background-color:#000;
	width:680px;
	margin-left:13px;
	margin-top:-33px;
	margin-bottom:7px;
	color:#000;
	height:45px;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;


}

div.image-title {
	font-weight: normal;
	font-size: .9em;
	color:#fff;

	
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
	color:#fff;
}
div.navigation {
	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
	clear: both;
	margin: 11px;
	padding: 0px;
	width:699px;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 3px 3px 0px 0px;
	list-style: none;
}
a.thumb {
	padding: 2px;
	display: block;
	/*border: 1px solid #ccc;*/
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border:0px;
	display: block;
/*	width:54px;
	height:54px;*/
}
div.pagination {
	clear: both;
	font-size:.7em;
}
div.navigation div.top {
	margin-left:20px;
	height: 11px;
}
div.navigation div.bottom {
	padding-top: 3px;
	margin-left: 2px;

}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	color:#fff;
	padding: 1px 3px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: normal;
	background-color: #eee;
/*	border-color: #000;
*/	color: #333;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}

Open in new window

0
Comment
Question by:Kyle Hamilton
5 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 668 total points
ID: 34241225
It looks like it's coming from the .content class in your styles.css file.  
0
 
LVL 11

Assisted Solution

by:level9wizard
level9wizard earned 664 total points
ID: 34241248
.content {
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-style: solid;
    border-width: 1px;
}
0
 
LVL 8

Expert Comment

by:Zado
ID: 34241266
Add this to your css:
a {
  border:0;
  border-width:0;
  outline:0;
  outline-width:0; 
}

Open in new window

0
 
LVL 14

Assisted Solution

by:Scott Madeira
Scott Madeira earned 668 total points
ID: 34241810
In your css/styles.css file you have this line:

@-moz-document url-prefix() { .content { border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2;  } } /* FF2 */


you can

1. Eliminate the line from your CSS file if it isn't used elsewhere on the site  OR
2. Change border: 1px solid; to border: none;

If you need this style somewhere else you can create a new style

.content2 {
      border: none;
}

and then change the <div id="gallery" class="content">  to <div id="gallery" class="content content2"> in places where you don't want the border.


0
 
LVL 25

Author Closing Comment

by:Kyle Hamilton
ID: 34242711
You all deserve lots of equal credit. Thanks!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
The viewer will learn how to count occurrences of each item in an array.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question