?
Solved

mysterious border in firefox

Posted on 2010-11-30
5
Medium Priority
?
585 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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

764 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