[Typo3] Gaps under images in IE

[Christopher]

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