Problems with GK Image Border Plugin

I've got an issue with GK Image Border Plugin. when I turn on this plugin, all images appears without space between them, like this capture






I would like to turn on this plugin without this issue, like this image:




My site: Joomla 1.5.22
Party freak 2.0.15

How can i solve this problem?

Thank you

Looks like a float issue causing the different areas/lines to run into each other and also some padding/margins needed for the images themselves.

Do you have a link to the live/demo site we can look over the actual code?

Chris

Hi

Yes we need to see it live.

It would also be useful to have admin access to see how you've actually put that page together . . . if it has some overrides in place in the css, that could also be the issue.

If you do want to send those details, don't post them here directly, rather PM then to one of the Moderators that is involved.

Chris

Hi

I do not think if it's possible to use that plugin in that situation. Anyway I'll ask someone else for help.

Without seeing the live page code etc its hard to see what's going on.

You could always add a class suffix to that specific page and then create overrides for those page elements that you need to . . .

Hi

The easier way is to build the article like this (i used toggle editor mode):

Code: Select all

</br></br>
<h1>Patrocinador Principal</h1>
<div class="art-border-fix">
<a href="http://www.heineken.es/" target="_blank"><img src="images/stories/HeinekenNewWhite2.jpg" border="0" alt="Heineken" width="200" height="99" style="border-width: 0px;" /></a>
</div>
</br>
<hr style="border-color: #444"></br>

<h2>Patrocinadores</h2>
<div class="art-border-fix">
<a href="http://www.nestle.es/" target="_blank"><img src="images/stories/nestle2.jpg" border="0" alt="Nestlé" width="190" height="94" style="border-width: 0px;" /></a>
</div>
</br>
<hr style="border-color: #444"></br>

<h3>Colaboradores</h3>
<div class="art-border-fix">
<a href="http://www.faro.chillart.org/" target="_blank"><img src="images/stories/faro.jpg" border="0" alt="faro" width="170" height="84" style="border-width: 0px;" /></a><a href="http://www.diflomar.com/" target="_blank"><img src="images/stories/logos-colaboradores-diflomar.jpg" border="0" alt="Diflomar" width="170" height="84" style="border-width: 0px;" /></a> <a href="http://www.apinsa.com" target="_blank"><img src="images/stories/logos-colaboradores-apinsa.jpg"  border="0" alt="Apinsa" width="170" height="84" style="border-width: 0px;" /></a> <a href="http://artistasdetenerife.jimdo.com/"><img src="images/stories/hoteles/logos-colaboradores-artistas-tenerife-blanco.jpg" border="0" alt="Artistas de Tenerife" width="170" height="84" style="border-width: 0px;" /></a> <a href="http://www.saunierduval.es" target="_blank"><img src="images/stories/saunier1.jpg" border="0" alt="Saunier Duval" width="170" height="84" style="border-width: 0px;" /></a>
</div>
</br>
<hr style="border-color: #444"></br>

<h3>Media Partners</h3>
<div class="art-border-fix">
<a href="http://www.canariasteve.com/" target="_blank"><img src="images/stories/banner-canariasteve.jpg" border="0" alt="Canarias Te Ve" width="170" height="84" style="border-width: 0px;" /></a> <a href="http://www.canarias24horas.com" target="_blank"><img src="images/stories/banner-c24h.jpg" border="0" alt="Canarias24Horas.com" width="170" height="84" style="border-width: 0px;" /></a>
</div>


and add this css on override.css file (i already added)

Code: Select all

.art-border-fix {overflow: hidden; }
.art-border-fix .gk_img_border_top {margin: 0 20px 0 0}


screen_2011-02-19.png

I suppose if i "insist" a little more, i could find a different way, but image border plugin use complex position.

Cheers

Hi

Thank You very much for help. I've spend an hour and the result was good, unfortunately not under IE ;/

I don't see any problem with IE7 or 8
I only made it on this one.

Maybe you are seeing it on a different one

EDIT:
I made the same on the second article.
Check now.

Hi

The problem still there in other articles, with GK image border plugin enabled:





with GK image border plugin disabled:






Thak you very much for your support

An image only shows what is wrong visually . . . without seeing the code of the page it's impossible to know what is actually happening.

Can you either post a link to the site with the plugin enabled or PM me with the details and I'll take a quick look.

You basically want to add spacing (padding) horizontally between images?

Chris

I don't see any problem with IE7 or 8
I only made it on this one.

Maybe you are seeing it on a different one

EDIT:
I made the same on the second article.
Check now.

Haha. I was talking about my work. You have probably seen it commented in override.css


cedacosur what is the url of this page ?

My URL: http://www.canaryfestival.com/
Control Panel: http://www.canaryfestival.com/administrator

User: demo
Pass: gavick

Thank you

You'll need to alter the padding to add space between each image that is wrapped in this code:

div.gk_img_border_top (gk_stuff.css - line 609)

You'll also need to change how your divs work as you can't center divs in the way you have it currently as you don't have widths fixed. If it was me I'd probably add the padding override to the image wrap code and then wrap each row of images in a separate div and center that div in the width.

My URL: http://www.canaryfestival.com/
Control Panel: http://www.canaryfestival.com/administrator

User: demo
Pass: gavick

Thank you

Hi

I've ment this particular page from the screenshot. What CMYKreative is saying is right. Hopefully I'l think about some easy to add css code.