Solved

mysterious border in firefox

Posted on 2010-11-30
5
569 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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 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