Link to home
Start Free TrialLog in
Avatar of Amanda Watson
Amanda WatsonFlag for Australia

asked on

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

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
Avatar of j-b-t
j-b-t
Flag of Australia image

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.
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
Avatar of Amanda Watson

ASKER

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
ok then check it's not a caching issue - becuase that's definitely what's causing the boarder to appear in my browser
oops spelling!!
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?
hmm do you have this exact file?
/templates/ja_kyanite_ii/css/mod_jaslideshow2.css
can you paste it here?
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
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; }
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

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

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!!
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





ASKER CERTIFIED SOLUTION
Avatar of j-b-t
j-b-t
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
it's not the perfect fix (I prefer to find the problem) But it should do the trick! - Glad it worked!