image nested in <div> appear to be 10px below the corresponding <div>-box

[tomasio]

Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[NikitaTheSpider]

tomasio wrote:

Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?

Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

[tomasio]

On 9 Jun 2006 14:00:38 -0700, Ni*************@gmail.com wrote:

tomasio wrote:

Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?

Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?

[Neredbojias]

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?

Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?

For starters, try setting font-size:0; in the relevant divs.

--
Neredbojias
Infinity has its limits.

[tomasio]

On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?

Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?

For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.

[NikitaTheSpider]

tomasio wrote:

On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?

For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.

Tomasio,
It's not so strange. They use the default font size specified in your
browser. That's what it is there for, no?

Cheers
Philip

[Neredbojias]

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?

For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.

One could wish that images were immune to this phenomena but that might be
impossible to impliment.

--
Neredbojias
Infinity has its limits.

[boclair]

tomasio wrote:

On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

> I have built a html-page with some
> CSS. Anything behaves as expected, just the two images inside the
> <div> with the class attributes "schraffur-bottom" and
> "content-bottom" appear 10px below their corresponding containers.

For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.

Not strange.

img is in-line element, as is font. The in-line box allows for
descenders, such as for g, j, p, q, y, etc. Hence the font-size=0; setting.

However declaring display:block; on the img element negates the need.

Louise

[tomasio]

On Mon, 12 Jun 2006 05:26:39 GMT, boclair <bo*****@bigpond.net.au>
wrote:

tomasio wrote:

On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

>> I have built a html-page with some
>> CSS. Anything behaves as expected, just the two images inside the
>> <div> with the class attributes "schraffur-bottom" and
>> "content-bottom" appear 10px below their corresponding containers.
For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.

Not strange.

img is in-line element, as is font. The in-line box allows for
descenders, such as for g, j, p, q, y, etc. Hence the font-size=0; setting.

However declaring display:block; on the img element negates the need.

Louise

Thanx Louise, with your help I found an elegant solution. And thanks
everyone else for explaining me the reason for this behaviour.