tags:

views:

38

answers:

2

Hi,

I have a picture on my website which has to much space beneath a picture. I tried to search for extra
tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?

The location is: images/artikelen/123.png

this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.

The picture is placed in a joomla module in a place called showcase 2

<div id="showcase-surround">
                <div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
                    <div class="showcase-inner">
                        <div id="showmodules" class="spacer">
                                <div class="block full" style="width: 1004px;">
                                    <div class="module-light">

                                        <div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
    <div class="body-surround"><div class="body-surround2"><div class="body-surround3"> 

    <div class=" showcase2:82">
        <div class="moduletable">
                        <a href="/Contact-Formulier/Friese-Computer-Service.html" target="_self" title="Friese Computer Service - Computerhulp en PC probleem snel opgelost"> </a> 
<table align="center" border="0">
<tbody>
<tr>
<td><a href="/Contact-Formulier/Friese-Computer-Service.html" target="_self" title="Friese Computer Service - Computerhulp en PC probleem snel opgelost"> <img style="text-align: center;" src="/images/artikelen/123.png" /></a><a href="/Contact-Formulier/Friese-Computer-Service.html" target="_self" title="Friese Computer Service - Computerhulp en PC probleem snel opgelost"> </a></td>
</tr>

</tbody>
</table>
A: 

Without the CSS it's hard to guess what's happening, but try putting this in your CSS:

.moduletable img { display: block; }
Mike Robinson
+1  A: 

You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:

.moduletable
{
   ...
   marging-bottom: 15px;
   ...
}

Remove margin-bottom and you're done.

Igor Korkhov
Dom Inspector hasn't been included in Firefox since version 2.0, I think.Plus, a much better tool for inspecting CSS is Firebug (http://getfirebug.com/). It will even give you a nice visual representation of the margin and padding of an element, which can be handy.
pib
@pib: Yes, you are right, it is not included by default anymore, I should have mentioned that it needs to be installed as an add-on. However, Firebug needs to be installed too. And both of them are able to display paddings/margins.
Igor Korkhov
Great! this was indeed the margin what caused the problem :) Thanks!
Chris