[Typo3] Gaps under images in IE

[Carlos Rodriguez]

Christopher schrieb:
> Hi,
> 
> On 6/12/05, Amir Mualem <amir219 at sbcglobal.net> wrote:
> 
>>Rupert Germann wrote:
>>
>>>Amir Mualem wrote:
>>>
>>>
>>>
>>>>Hey guys,
>>>>
>>>>Here is another question where I have absolutely no clue to the answer.
>>>> As you can see in my front page there are two boxes side by side to
>>>>each other.  Each of them are FCE container elements.  In each container
>>>>I added an HTML code element.  In that code I put an image HTML to show
>>>>an image as you can see there with a link.
>>>>
>>>>In Firefox it works PERFECTLY.
>>>>
>>>>However in IE there is a small gap under each image... how do I fix this?
>>>
>>>
>>>take a look to your html source and search for space characters before or
>>>after the images. IE displays them FF not.
>>>
>>>rupi
>>
>>I dont see any space except the space given by the typo3 which has all
>>the comments in seperate lines etc.  In my input there is no space however.
>>
>>                                        <div id="feature_box">
>>
>>        <!--  CONTENT ELEMENT, uid:62/html [begin] -->
>>                <a name="62"></a>
>>                <!--  Raw HTML content: [begin] -->
>>                        <a href="#" style="padding:0px; margin:0px;"><img
>>src="fileadmin/templates/images/featured_spartan.jpg" height="193"
>>border="0" style="padding:0px; margin:0px;" alt="Breaking information
>>about Spartan Total War!  Exclusive interview!" /></a>
>>                <!--  Raw HTML content: [end] -->
>>
>>        <!--  CONTENT ELEMENT, uid:62/html [end] -->
>>                </div>
>>
>>thats the code for the left image.
>>
> 
> 
> This is probably a css problem; images are inline elements by default.
> That means they behave as though they're on a line of text and that
> the bottom of the image is positioned on the BASELINE of the parent
> element (or, in other words, where the bottoms of letters without
> descenders are placed). This means that there's a space between the
> bottom of the image and the bottom of the 'line'. The solution?
> 
> 1. Style images inside the container to be aligned with the bottom of
> the parent rather than the baseline:
> 
> div#feature_box img {
>   vertical-align:bottom;
> }
> 
> 2. Style images inside the container not to be inline elements in the
> first place (depending on exactly what you need to accomplish, this
> may or may not create other problems in your layout):
> 
> div#feature_box img {
>   display:block;
> }
> 
> Incidentally, why have you got all those ugly inline styles in the
> source? You could as easily add something like this to your
> stylesheet:
> 
> div#feature_box img,
> div#feature_box a {
>   padding:0;
>   /* margin:0; left out because it makes no sense to try to apply a
> margin to an inline element in the first place... */
> }
> 
> ...or probably better all-around:
> 
> img,
> a {
>   /* Do it globally since this will probably _usually_ be how you want
> it to work. When you need to , _add_ padding to individual elements
> via a class... */
>   padding:0;
> }
> 
> 
> -Christopher


I think the best is to have something like this:

* { padding:0px; margin:0px; }

If you need space ust style it for the elements which need them. Usually 
you do not need the space...

=)