how to remove border in a slideshow

Hi. I have a page that displays a slideshow:

http://www.xolgallery.com/

The border that encloses the slideshow has collapsed. It looks like the container that contains the slideshow has lost its grip on the sides and top of the border. There is now only a thick, gray border at the bottom of the each image in the slideshow. Now the client wants to just get rid of the border.

How can I get rid of that border?

I tried this:

ul.bxslider {
padding:0;
border:0;
}

Open in new window


but the border remains.

What am I missing? Thank you for your help.

Eric
LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
In fact that gray line is a shadow :)
Comes from here: jquery.bxslider.css
.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 5px #ccc;
	/* -webkit-box-shadow: 0 5px #ccc; */
	/* box-shadow: 0 5px #ccc; */
	/* border:  5px solid #fff; */
	/* left: -5px; */
	/* background: #fff; */
	
	/*fix other elements on the page moving (on Chrome)*/
	/* -webkit-transform: translatez(0); */
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

Open in new window

Just also comment the first line -moz-box-shadow: 0 5px #ccc;
0
Eric BourlandAuthor Commented:
Alexandre,

A-ha!  A shadow.

Can I remove it like so:

.bx-wrapper .bx-viewport {
 -moz-box-shadow: none;
}

I am trying to not alter the original style sheet since this is a WordPress theme.

Setting -moz-box-shadow: none; does not seem to remove the shadow. Is there another workaround?

Thank you very much for your help.

Eric
0
Alexandre SimõesManager / Technology SpecialistCommented:
Is your CSS file declared AFTER the jquery.bxslider.css?

You can also try to add an !important at the end like this:
.bx-wrapper .bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Open in new window

I also added all the other variants just to make sure :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
>>>Is your CSS file declared AFTER the jquery.bxslider.css?

Yes -- that is supposedly what this WordPress theme allows. =)


.bx-wrapper .bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}


... that worked!
0
Eric BourlandAuthor Commented:
This worked great. Many thanks to Alexandre -- have an excellent day.

best from Eric
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.