CMS Made Simple Forums

Posted: **Fri Feb 23, 2007 8:43 am**

Hi,

I'm using an image with a height of 211px in {content} within DIV #vierkant. When this is displayed in IE6 there appears some space underneath the image. In Firefox there is no additional space. Examination shows that the hidden parameter in IE clientheight is 213px. When there is only text in the DIV the clientheight is 211, like it should be (height is set to 211px).

When I use the same code without CMSMS there is no additional space.

The relevant code is:

Code: Select all

#vierkant {
   float: left;
   margin-right: 14px;
   margin-top: 20px;
   padding: 0px;
   width: 223px;
   height: 223px;
   display: inline;
}
.hoofdvlak {
   float: left;
   height: 211px;
   width: 211px;
}
.rand-rechts {
   float: right;
   width: 12px;
   background: url(images/rand-rechts.gif) repeat-y;
   height: 211px;
}
.rand-onder-kort {
   width: 224px;
   height: 12px;
   background: url(images/rand-onder-kort.gif) no-repeat;
}
-----
<div id="vierkant">
  <div class=hoofdvlak>
     {content block="v1"}
  </div>
  <div class=rand-rechts></div>
  <div class=rand-onder-kort></div>
</div>

I'm using 1.0.2 Maui

Thank you for any help on how to 'remove' the addional space.

Posted: **Fri Feb 23, 2007 9:53 am**

I have the same kind of problem in my website at some places. IE6 seems to add extra space below content that isn't added with firefox.

Posted: **Fri Feb 23, 2007 2:25 pm**

Even if IE6 is soon no more, may be every CSS should begin with :

Code: Select all

* { margin: 0; padding: 0; }

so every one can put his/her own spacing settings to each used tag.

Pierre M.

Posted: **Sun Feb 25, 2007 10:57 am**

Although it is not in the code example,

Code: Select all

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

is declared in the sheet.

I can not wait until IE6 is 'no more'. In the meantime I keep searching for a solution.

Erwin

Posted: **Sun Feb 25, 2007 1:43 pm**

Problem solved!

I read the following quote somewhere on the internet:

try giving the image a style="display:block" . my guess is the space you are seeing is due to imgs being defined as inline by default. an inline image rests on a text baseline, even if there is no text, and i bet the space you are seeing is due to the line-height on the line of (non)text that contains the inline image.

Indeed, by adding

Code: Select all

.hoofdvlak img {
   display: block;
}

the problem is solved.

Erwin

CMS Made Simple Forums

unwanted additional space under image [solved]

unwanted additional space under image [solved]

Re: unwanted additional space under image and clientheight

Re: unwanted additional space under image and clientheight

Re: unwanted additional space under image and clientheight

Re: unwanted additional space under image [solved]