Solved

mysterious border in firefox

Posted on 2010-11-30
5
572 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 167 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 166 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 167 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Obtaining data on ASP 8 28
Deployment issue on AWS S3 1 33
Need output in powershell ( Vertical format) 2 21
html / css issue / div issue. stuck, help needed 2 14
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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…

861 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