Annoying black line is appearing on the top of this slideshow...can anyone figure out how to remove it?

Amanda Watson
Amanda Watson used Ask the Experts™
on
Hi There ,
If you go to this site here: http://bizgro.com.au/

you will notice the main image slider has got a black line above it and I can't for the life of me figure out to remove it.

If I remove the main image slider, it disappears, so using Firebug doesn't seem to reveal how this can be removed.

I have looked through the css of this module and I cannot see any borders or anything that pertain to this.   I have also tried reducing the height of the module, BUT NOTHING IS working.

Can anyone help?

I have added the style sheets if that helps
ja.slideshow2.txt
style.txt
ja.slideshow2-articles.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Try finding this file in your template:
yoursite.com/templates/ja_kyanite_ii/css/mod_jaslideshow2.css
(check spelling of above path - I had to type it in)

find:
.ja-slidewrap {
border:1px solid #191A1B;
margin:0;
padding:0;
position:relative;
}

change border to :0;

hope that helps.
Tony O'ByrneSenior Web Developer

Commented:
Be careful though - it appears twice in your CSS.
Once in
/templates/ja_kyanite_ii/css/mod_jaslideshow2.css

and once in
/modules/mod_jaslideshow2/assets/style.css
Amanda WatsonWeb Developer

Author

Commented:
I wish that did help.

This is how this is showing already:
.ja-slidewrap {
      margin: 0;
      padding: 0;
      height: 170px;
      position: relative;
}

There was no border
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
ok then check it's not a caching issue - becuase that's definitely what's causing the boarder to appear in my browser

Commented:
oops spelling!!
Amanda WatsonWeb Developer

Author

Commented:
How can I not even have that border in my css and it still be appearing.
It was never in the css since I have used it.

Are you telling me when you change it it disappears.

Can you see it in any browsers.  I am not sure what you mean.

I am not sure how it can be in my cache when I didn't change anything anyway?

Commented:
hmm do you have this exact file?
/templates/ja_kyanite_ii/css/mod_jaslideshow2.css
can you paste it here?

Commented:
this is what the file's code looks like to me:

 
.ja-slidewrap {
border:1px solid #191A1B;
margin:0;
padding:0;
position:relative;
}
.ja-slide-main-wrap {
float:left;
overflow:hidden;
position:relative;
}
.ja-slide-main {
position:relative;
z-index:1;
}
.ja-slide-item {
display:block;
float:left;
margin:0;
overflow:hidden;
position:relative;
}
.ja-slide-item img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
}
.ja-slide-thumbs-wrap {
clear:both;
overflow:hidden;
position:relative;
}
.but_prev, .but_next {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
position:absolute;
top:0;
z-index:99;
}
.but_prev {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-l.gif) no-repeat scroll right center;
left:0;
}
.but_prev:hover, .but_next:hover {
cursor:pointer;
}
.but_next {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-r.gif) no-repeat scroll left center;
right:0;
}
.maskDesc {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
cursor:pointer;
display:block;
position:absolute;
z-index:100;
}
.maskDesc .ja-slide-desc {
color:#CCCCCC;
font-size:100%;
padding:10px 20px;
}
.maskDesc .ja-slide-desc a, .maskDesc .ja-slide-desc a:hover, .maskDesc .ja-slide-desc a:focus, .maskDesc .ja-slide-desc a:active {
border:medium none !important;
text-decoration:none !important;
}
.maskDesc .ja-slide-desc a span {
color:#FFFFFF;
font-size:150%;
font-weight:bold;
}
.maskDesc .ja-slide-desc br {
display:none;
}
.maskDesc .ja-slide-desc h3 {
margin:0;
padding:0;
}
.maskDesc .ja-slide-desc p a {
color:#CCCCCC;
}
.maskDesc a.readon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-ri.gif) no-repeat scroll right 7px;
bottom:2px;
color:#CCCCCC;
display:block;
font-size:100%;
font-weight:bold;
padding:0 8px 0 0;
position:absolute;
right:20px;
}
.maskDesc a.readon:hover, .maskDesc a.readon:active, .maskDesc a.readon:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-ri-hover.gif) no-repeat scroll right 7px;
color:#FFFFFF;
}
.ja-slide-buttons {
z-index:900;
}
.ja-slide-buttons span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
color:#FFFFFF;
cursor:pointer;
display:block;
float:left;
margin-right:5px;
padding:2px 5px;
}
#ja-slideshow .ja-slidewrap {
margin:0;
padding:0;
position:relative;
}
#ja-slideshow .ja-slide-mask {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
bottom:10px;
display:none;
height:70px;
position:absolute;
right:10px;
width:210px;
z-index:99;
}
#ja-slideshow .ja-slide-thumbs-wrap {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
bottom:10px;
position:absolute;
right:10px;
z-index:100;
}
#ja-slideshow .ja-slide-buttons {
bottom:10px;
display:block;
left:10px;
margin:0;
padding:0;
position:absolute;
z-index:101;
}
#ja-slideshow .ja-slide-thumb img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #FFFFFF;
margin:4px;
}
#ja-slideshow .ja-slide-item img {
border:medium none;
padding:0;
}
#ja-slideshow .maskdesc {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
}
#ja-slideshow .maskdesc .ja-slide-desc {
color:#FFFFFF;
font-size:100%;
padding:20px 10px;
position:absolute;
right:0;
top:0;
width:230px;
}
#ja-slideshow .maskdesc .ja-slide-desc h3 {
color:#CCCCCC;
text-transform:uppercase;
}
.ja-vertical_right {
overflow:hidden;
position:absolute;
right:0;
top:0;
z-index:100;
}
.ja-vertical_left {
left:0;
overflow:hidden;
position:absolute;
top:0;
z-index:100;
}
.ja-vertical_right .active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-bg.gif) no-repeat scroll left center;
}
.ja-vertical_left .active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/arrow-bg2.gif) no-repeat scroll right center;
}
.ja-slide-right {
float:right;
margin-left:auto;
right:0;
top:0;
}
.ja-slide-thumbs, .ja-slide-thumbs-mask, .ja-slide-thumbs-handles {
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
}
.ja-articles .ja-slide-thumbs-handles {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
opacity:0;
}
.ja-slide-descs {
display:none;
}
.ja-slide-thumb, .ja-slide-thumbs-handles span {
cursor:pointer;
display:block;
float:left;
margin:0;
}
.ja-vertical_right .ja-slide-thumb, .ja-vertical_right .ja-slide-thumbs-handles span {
float:none !important;
}
.ja-vertical_left .ja-slide-thumb, .ja-vertical_left .ja-slide-thumbs-handles span {
float:none !important;
}
.ja-slide-thumbs-wrap .ja-slide-thumb-inner h3 {
font-size:110%;
margin-bottom:5px !important;
text-transform:none !important;
}
.ja-slide-thumbs-wrap .active .ja-slide-thumb-inner {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#57212A url(../images/grad-bg.gif) repeat-x scroll left top;
}
.ja-slide-thumbs-wrap .active .ja-slide-thumb-inner h3 {
color:#FFFFFF !important;
}
.ja-slide-thumbs-handles span {
}
.ja-slide-thumbs-mask-left, .ja-slide-thumbs-mask-right, .ja-slide-thumbs-mask-center {
float:left;
}
.ja-vertical_right .ja-slide-thumbs-mask-left, .ja-vertical_right .ja-slide-thumbs-mask-right, .ja-vertical_right .ja-slide-thumbs-mask-center {
display:block;
float:none;
}
.ja-vertical_left .ja-slide-thumbs-mask-left, .ja-vertical_left .ja-slide-thumbs-mask-right, .ja-vertical_left .ja-slide-thumbs-mask-center {
display:block;
float:none;
}
.ja-slide-thumb-inner {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
border-top:1px solid #191A1B;
color:#757575;
height:100%;
margin-left:19px;
padding:0 15px;
}
.ja-vertical_left .ja-slide-thumb-inner {
margin-left:0;
margin-right:19px;
}
.ja-slide-thumb-inner img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
border:1px solid #1C1C1C;
margin:15px 10px 0 0;
padding:3px;
}
.ja-slide-thumb-inner h3 {
margin:0 !important;
padding:15px 0 0 !important;
}
.ja-slide-thumb-inner .ja-createdate {
}
.active .ja-slide-thumb-inner {
border:medium none;
color:#FFFFFF;
}
.active .ja-slide-thumb-inner img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#57212A none repeat scroll 0 0;
border:1px solid #67373F;
}
.ja-slide-thumbs-mask-left, .ja-slide-thumbs-mask-right, .ja-slide-thumbs-mask-center {
float:left;
}
.ja-slide-thumbs-mask-left, .ja-slide-thumbs-mask-right {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
}
.ja-slide-mask {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/slide-mask.png) no-repeat scroll left top;
height:300px;
left:0;
position:absolute;
top:0;
width:660px;
z-index:3;
}
.maskDesc a.readon {
border:medium none !important;
}


I guess another possibility is an html override - but it does seem to be using this file
Amanda WatsonWeb Developer

Author

Commented:
Sure, this is what I have

.ja-slidewrap {
      margin: 0;
      padding: 0;
      height: 170px;
      position: relative;
}

.ja-slide-main-wrap { position: relative;      overflow: hidden; }

.ja-slide-main { z-index: 1; }

.ja-slide-item {
      display: block;
      float: left;
      position: relative;
      overflow: hidden;
      margin: 0;
}

.ja-slide-item img {      background: none;      border: none; padding: 0; }

/* Slide Thumbnail ---*/
.ja-slide-thumbs-wrap {
      clear: both;
      overflow: hidden;
      position: absolute;
      left: 10px;
      bottom: 10px;
      z-index: 101;
}

.ja-slide-thumbs, .ja-slide-thumbs-mask, .ja-slide-thumbs-handles {
      position: absolute;
      top: 0;
      margin: 0;
      padding: 0;
      width: 5000px;
}

.ja-slide-thumbs-mask {      display: none; }

.ja-slide-thumb, .ja-slide-thumbs-handles span {
      background: url(../images/circle-bg.png) no-repeat center center;
      color: #fff;
      cursor: pointer;
      display: block;
      font-weight: bold;
      float: left;
      margin: 0;
      text-indent: -300%;
}

.ja-slide-thumbs-handles span.active { background: url(../images/circle-active.png) no-repeat center center; }

.ja-slide-thumbs-mask-left,
.ja-slide-thumbs-mask-right,
.ja-slide-thumbs-mask-center { float: left; }

.ja-slide-thumbs-mask-left, .ja-slide-thumbs-mask-right{      background: #000000; }

/* Mask of Description ---*/
.maskDesc {
      background: url(../images/sl-mask.png) no-repeat left top;
      display: block;
      position: absolute;
      z-index: 100;
      cursor: pointer;
}

* html .maskDesc { background: url(../images/sl-mask1.gif) no-repeat left top; }

.maskDesc .ja-slide-desc {
      float: right;
      display: block;
      margin-top: 1px;
      margin-right: 5px;
      padding: 0;
      width: 964px;
      height: 166px;
}

.maskDesc .ja-slide-desc p {
      margin: 15px 0;
}

.maskDesc .ja-slide-desc-inner {      padding: 30px; }

.maskDesc .ja-slide-desc br {      display: none; }

.maskDesc .ja-slide-desc h3 { font-size: 250%; margin: 0 0 10px; text-shadow: 1px 1px 0 #642B07; }

/* Read more button ---*/
.maskDesc a.readon {
      background: url(../images/topsl-readon.png) no-repeat left top;
      bottom: 35px;
      color: #ccc;
      display: block;
      font-weight: bold;
      font-size: 125%;
      height: 29px;
      position: absolute;
      padding: 6px 15px 0 35px;
      right: 200px;
      width: 108px;
      text-decoration: none;
      text-shadow: 1px 1px 0 #333;
}

.maskDesc a.readon:hover, .maskDesc a.readon:active, .maskDesc a.readon:focus {
      background: url(../images/topsl-readon.png) no-repeat left bottom;
      color: #fff;
}

/* Control buttons ---*/
.ja-slide-buttons { z-index: 900; position: absolute; bottom: 10px; right: 5px; }

.ja-slide-buttons span {
      background: #000;
      color: #999;
      cursor: pointer;
      display: block;
      float: left;
      font-size: 92%;
      font-weight: bold;
      margin-right: 5px;
      padding: 0 5px;
}

.ja-slide-buttons span.ja-slide-prev:hover,
.ja-slide-buttons span.ja-slide-playback:hover,
.ja-slide-buttons span.ja-slide-play:hover,
.ja-slide-buttons span.ja-slide-stop:hover,
.ja-slide-buttons span.ja-slide-next:hover { background: #BF0000; color: #fff; }
Amanda WatsonWeb Developer

Author

Commented:
not really sure what a html override means...does that mean changing the css link in the html?

I just don't understand why this border isn't in my css but shows

Commented:

Hmm ok (tricky! - maybe it's coded somewhere else - but this still seems to work for me!).

Actually - also try this in your file posted above:
.ja-slidewrap {
      margin: 0;
      padding: 0;
      height: 170px;
      position: relative;
border:0; <-------ADD THIS
}


OR umm have you checked this file also:
yoursite.com/modules/mod_jaslideshow2/assets/style.css (make similar change as above if needed)

RE
html override - in template folder there is often an html folder with soem php code that overides the core or extension code - and can be used to modify layouts etc
http://docs.joomla.org/Understanding_Output_Overrides
so I guess the question is is there a folder called mod_jaslideshow2 inside the html folder of your template

Let me know how you go

Amanda WatsonWeb Developer

Author

Commented:
Righto so yes it was in the style.css within the assets folder of the actual module, so well done in finding it.
So I found:
.ja-slidewrap {
      border: 1px solid #191A1B;
      margin: 0;
      padding: 0;
      position: relative;
}
and changed it to:
.ja-slidewrap {
      border: 0;
      margin: 0;
      padding: 0;
      position: relative;
}

and I also tried removing it completely...but ITS STILL THERE!!

Commented:
Hey you are not using more than one template are you?? - or different versions on different pages - because I still see it in the file:

/templates/ja_kyanite_ii/css/mod_jaslideshow2.css

Please make sure you are not looking at the style.css file in your template's css folder because I see it refrenced there also





Commented:
you can't remove it completely btw as it will fall back on other styling

also check turn off site cahing in global config



however if all else fails go to
/templates/ja_kyanite_ii/css/TEMPLATE.CSS

and add this at very bottom.
.ja-slidewrap{border:0;}
Amanda WatsonWeb Developer

Author

Commented:
Nice work JBT

adding .ja-slidewrap{border:0;}

to the bottom of template css worked.

I was only using one version of the template through out.

That one has me baffled, !!
Well done

Commented:
it's not the perfect fix (I prefer to find the problem) But it should do the trick! - Glad it worked!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial